JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

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>/**
 * Multiline comments
 * Lorem ipsum dolor sit amet...
 * TADA!!!
 */

table[border="1"] {
  border-collapse:collapse;
  margin:10px;
}

table[border="1"],
table[border="1"] th,
table[border="1"] td {
  border:1px solid #bbb;
  padding:2px 7px;
}

td {
  vertical-align:top;
}

table[border="1"] th {
  background-color:#fafafa;
  font-weight:700;
  text-align:left;
}

.full,
table.full {
  width:96.8%;
}

table.config {
  background-color:#FFF0A0;
}

table.config td,
table.config th {
  border-color:#333;
}

table.config th {
  background-color:#333;
  color:white;
}

#comments {
  padding:20px 30px 30px;
  margin:0 2%;
  background-color:#2f2f2f;
  border:2px solid #666;
  box-shadow:inset 0 0 7px black;
  color:white;
}

#comments .note,
#comments em[rel="note"] {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:linear-gradient(top,#333,#222);
  box-shadow:0 0 0 1px #555;
  color:#ccc;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  text-shadow:0 1px 0 black;
}

#comments .note a,
#comments .note code {
  font-size:11px;
}

#comments img.incomment {
  display:block;
  margin:2px auto 0;
}

#comments blockquote img.incomment {
  display:block;
  margin:2px auto 0 !important;
}

#comments a {
 ...

CSS

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

pre {
  background-color:#111;
  color:#069;
  padding:0em 1em;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  font:normal 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:#444;
  border-right:2px solid #333;
}

pre .bracket   {color:#369;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:darkgreen;}
pre .selector  {color:green;}
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

$(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 class='attribute'>$1</span>:$2$3")
        .replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
        .replace(/!important/ig, "<mark...