JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="https://highlightjs.org/static/highlight.site.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<pre><code class="html">
addEventListener('load', () => {
  const code = document.querySelector('#code');
  const worker = new Worker('worker.js');
  worker.onmessage = (event) => { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
});
</code></pre>

CSS

pre {
  margin: 2em 0;
}

.hljs {
  display: block;
  padding: 1em;
  background: #500;
  color: #B99;
  border-width: 1px;
  border-style: solid;
  border-color: #400 #700 #700 #400;
}

.hljs-keyword,
.hljs-title,
.hljs-name {
  color: #F0F0F0;
}

.hljs-string,
.hljs-literal {
  color: #F77;
}

.hljs-comment {
    color: #766;
}

JavaScript

/*! highlight.js v9.15.6 | BSD3 License | git.io/hljslicense */
!function(e) {
    var t = "object" == typeof window && window || "object" == typeof self && self;
    "undefined" != typeof exports ? e(exports) : t && (t.hljs = e({}),
    "function" == typeof define && define.amd && define([], function() {
        return t.hljs
    }))
}(function(a) {
    var b = []
      , o = Object.keys
      , h = {}
      , p = {}
      , t = /^(no-?highlight|plain|text)$/i
      , f = /\blang(?:uage)?-([\w-]+)\b/i
      , r = /((^(<[^>]+>|\t|)+|(?:\n)))/gm
      , n = {
        case_insensitive: "cI",
        lexemes: "l",
        contains: "c",
        keywords: "k",
        subLanguage: "sL",
        className: "cN",
        begin: "b",
        beginKeywords: "bK",
        end: "e",
        endsWithParent: "eW",
        illegal: "i",
        excludeBegin: "eB",
        excludeEnd: "eE",
        returnBegin: "rB",
        returnEnd: "rE",
        relevance: "r",
        variants: "v",
        IDENT_RE: "IR",
        UNDERSCORE_IDENT_RE: "UIR",
        NUMBER_RE: "NR",
        C_NUMBER_RE: "CNR",
        BINARY_NUMBER_RE: "BNR",
        RE_STARTERS_RE: "RSR",
        BACKSLASH_ESCAPE: "BE",
        APOS_STRING_MODE: "ASM",
        QUOTE_STRING_MODE: "QSM",
        PHRASAL_WORDS_MODE: "PWM",
        C_LINE_COMMENT_MODE: "CLCM",
        C_BLOCK_COMMENT_MODE: "CBCM",
        HASH_COMMENT_MODE: "HCM",
        NUMBER_MODE: "NM",
        C_NUMBER_MODE: "CNM",
        BINARY_NUMBER_MODE: "BNM",
        CSS_NUMBER_MODE: "CSSNM",
        REGEXP_MODE: "RM",
        TITLE_MODE: "TM",
        UNDERSCORE_TITLE_MODE: "UTM",
        COMMENT: "C",
        beginRe: "bR",
        endRe: "eR",
        illegalRe: "iR",
        lexemesRe: "lR",
        terminators: "t",
        terminator_end: "tE"
    }
      , y = "</span>"
      , v = {
        classPrefix: "hljs-",
        tabReplace: null,
        useBR: !1,
        languages: void 0
    };
    function N(e) {
        return e.replace(/&/g,...