JSFiddle - React, Tailwind, and code Playground

Pure JQuery Syntax Highlighter by Taufik Nurrohman // Still an experimental :) // https://plus.google.com/108949996304093815163/about

by Andy Bulka

HTML

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Sample Page&lt;/title&gt;
&lt;/head&gt;
&lt;body class="init"&gt;
&lt;!-- top navigation --&gt;
&lt;nav id="navigation"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;!--
    Funky Syntax Highlighter Experiment
    by Taufik Nurrohman
    WARNING: THIS REGEX IS TOO SIMPLE AND INACURRATE!!!
    --&gt;

&lt;/nav&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<pre>

td {
  vertical-align:top;
}

table[border="1"] th {
  background-color:#fafafa;
  font-weight:700;
  text-align:left;
}
#comments .note a,
#comments .note code {
  font-size:11px;
}

#recentPostsLoader {
  overflow:hidden !important;
}
</pre>

CSS

body {
  background-color:#E7E5DC;
  padding:50px;
}

pre {
  background-color:white;
  color:#069;
  padding:0em 1em;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  position:relative;
  margin:0 0 1em;
}

pre .the-num {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  padding:0 1em;
  color:#999;
  background-color:#eee;
  border-right:2px solid #ccc;
}

pre .bracket   {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector  {color:blue;}
pre .attribute,
pre .regexp    {color:darkorange;}
pre .str       {color:green;}
pre .tag .str  {color:brown;}
pre .keyword   {color:darkred;}
pre .comment   {font-style:italic;color:#999;}
pre .num,
pre .hex       {color:darkviolet;}
pre .name,
pre .important,
pre .array     {color:red;}
pre .important {background-color:yellow;}
pre .doctype   {color:magenta;}

JavaScript

// Pure JQuery Syntax Highlighter by Taufik Nurrohman
// Still an experimental :)
// https://plus.google.com/108949996304093815163/about

$(window).load(function() {
    $('pre').each(function() {
        var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
            rep1 = new RegExp(list + " ", "ig"),
            rep2 = new RegExp(list + "( ?)<span", "ig"),
            $this = $(this);
        $this.html($this.html()
                  
        .replace(/(<br>|\n)$/ig, "")
        .replace(/(\t)/ig, "    ")
        .replace(/&quot;/ig, "\"")
        .replace(/&#39;|&apos;/ig, "\'")
        .replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
        .replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
        .replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
        .replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
        .replace(/(\d+(?!(.*&lt;)))/g, "<span class='num'>$1</span>")
        .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
        .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
        .replace(/&lt;(.*?)&gt;/g, "<span class='tag'>&lt;$1&gt;</span>")
        .replace(/&lt;!--([\s\S]*?)--&gt;/gm, "<span class='comment'>&lt;!--$1--&gt;</span>")
        .replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
        .replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
        .replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
        .replace(rep1, "<span class='keyword'>$1</span> ")
        .replace(rep2, "<span class='keyword'>$1</span>$2<span")
        .replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
        .replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span...