JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<code class="highlight">
  const greeting = "hello world"
  console.log(greeting)
  
  const someFun = () => 4 * 4 
  console.log(someFun())
</code>
<script>

(function(hijs) {
  //
  // hijs - JavaScript Syntax Highlighter
  //
  // Copyright (c) 2010 Alexis Sellier
  //

  // All elements which match this will be syntax highlighted.
  var selector = hijs || 'code';

  var keywords = ('var function if else for while break switch case do new null in with void ' +
      'continue delete return this true false throw catch typeof with instanceof').split(' '),
    special = ('eval window document undefined NaN Infinity parseInt parseFloat ' +
      'encodeURI decodeURI encodeURIComponent decodeURIComponent').split(' ');

  // Syntax definition
  // The key becomes the class name of the <span>
  // around the matched block of code.
  var syntax = [
    ['comment', /(\/\*(?:[^*\n]|\*+[^\/*])*\*+\/)/g],
    ['comment', /(\/\/[^\n]*)/g],
    ['string', /("(?:(?!")[^\\\n]|\\.)*"|'(?:(?!')[^\\\n]|\\.)*')/g],
    ['regexp', /(\/.+\/[mgi]*)(?!\s*\w)/g],
    ['class', /\b([A-Z][a-zA-Z]+)\b/g],
    ['number', /\b([0-9]+(?:\.[0-9]+)?)\b/g],
    ['keyword', new(RegExp)('\\b(' + keywords.join('|') + ')\\b', 'g')],
    ['special', new(RegExp)('\\b(' + special.join('|') + ')\\b', 'g')]
  ];
  var nodes, table = {};

  if (/^[a-z]+$/.test(selector)) {
    nodes = document.getElementsByTagName(selector);
  } else if (/^\.[\w-]+$/.test(selector)) {
    nodes = document.getElementsByClassName(selector.slice(1));
  } else if (document.querySelectorAll) {
    nodes = document.querySelectorAll(selector);
  } else {
    nodes = [];
  }

  for (var i = 0, children; i < nodes.length; i++) {
    children = nodes[i].childNodes;

    for (var j = 0, str; j < children.length; j++) {
      code = children[j];

      if (code.length >= 0) { // It's a text node
        // Don't highlight command-line snippets
        if (!/^\$\s/.test(code.nodeValue.trim())) {
          syntax.forEach(function(s)...