JSFiddle - React, Tailwind, and code Playground

by zachreynolds

HTML

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<code>package main

import &quot;fmt&quot;

func main() {
    ch := make(chan float64)
    ch &lt;- 1.0e10    // magic number
    x, ok := &lt;- ch
    defer fmt.Println(`exitting now\`)
    go println(len(&quot;hello world!&quot;))
    return
}
</code>


<script>
  function initSnippet() {
    var snippet = document.querySelector('#snippet pre code');
    hljs.highlightBlock(snippet);
    var style = document.getElementById('style-link').textContent;
    var links = document.querySelectorAll('.codestyle');
    Array.prototype.forEach.call(links, function(link) {
      link.rel = 'stylesheet';
      link.disabled = !link.href.match(style + '\\.css$');
    });
    document.getElementById('language-link').innerHTML = snippet.result.language;
    var controls = document.querySelectorAll('#control a');
    Array.prototype.forEach.call(controls, function(control) {
      control.addEventListener('click', function(e) {
        e.preventDefault();
        var request = new XMLHttpRequest();
        request.open('GET', control.href, true);
        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        request.onreadystatechange = function() {
          if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
            document.getElementById('snippet').innerHTML = request.responseText;
            initSnippet();
          }
        };
        request.send();
      });
    });
  }

  addEventListener('load', initSnippet);
</script>