JSFiddle - React, Tailwind, and code Playground

by mbutubuntu

HTML

<script type="text/javascript" src="//www.netd.it/stk/codemirror.all.js"></script>
<!--codemirror.all.js is a js script containing codemirror 2.21, runmode.js, css.js, less.js, python.js, javascript.js, mysql.js, htmlmixed.js, clike.js, xml.js and php.js-->
<div class='code'>
<code class='php'>
$db->exec("any query");
</code>
</div>

JavaScript

//this code is thought to work with many languages, this is because you see a mimeClass.

var mimeClass = {'python':'text/x-python', 'css':'text/css', 'mysql':'text/x-mysql', 'javascript':'text/javascript', 'html':'text/html', 'php':'text/x-php', 'less':'text/less'};

var codeBlocks = document.getElementsByTagName("code");

for(var i = codeBlocks.length-1; i >= 0; i--){
      var parent = codeBlocks[i].parentNode;
      var pre = document.createElement('pre');
      pre.className = 'cm-s-default';
      parent.appendChild(pre);
      var type = mimeClass[codeBlocks[i].className];
      CodeMirror.runMode(codeBlocks[i].innerHTML, type, parent.getElementsByTagName('pre')[0]);
      parent.removeChild(codeBlocks[i]);
  }