JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-okaidia.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script>
<h1>
  Example output
</h1>

Textarea field:<br>
<pre class="language-python">
	<code>
		def min_funktion(fname):
			namn = fname + " Johansson"
			return(namn)

		pappa = min_funktion("Thorleif")
		print(pappa)
	</code>
</pre> Text input field:<br>
<button>
Try it yourself
</button>
<hr>
<h2>
  Suggestions
</h2>
<ol>
  <li>Add new "code" component to TA
    <ul>
      <li>
        Textarea
      </li>
      <li>
        Text input (button URL)
      </li>
      <li>
        Select (programming language) - optional
      </li>
    </ul>
  </li>
  <li>Update Paragraph component with new functionality and add new link button component</li>
</ol>
<p>
  Code function needs <a href="https://prismjs.com">Prism</a> in order to work.
</p>
<p>
  <a href="https://schier.co/blog/2013/01/07/how-to-re-run-prismjs-on-ajax-content.html">Prism on Ajax content</a>
</p>
<hr>
<h2>
  References
</h2>
<p>
  <a href="https://www.sitepoint.com/best-practice-for-code-examples/">Coding conventions</a> for code examples.
</p>
<p>
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp">XMP</a>
  <a href="https://dev.w3.org/html5/spec-author-view/the-code-element.html#the-code-element">HTML5</a>
</p>
<p>
  <a href="https://www.freeformatter.com/html-escape.html">Escape illegal characters</a> in Javascript and HTML.
</p>

CSS

html {
  font-family: 'Open-sans', helvetica, arial, sans-serif;
}

code {
    line-height: 1.5;
		font-size: 1.5em;
}

button {
  background-color: green;
  color: white;
  box-shadow: none;
  border: 0;
  padding: 10px 20px;
}