JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="html">
<code>&lt;div&gt;This div is HTML&lt;/div&gt;</code>
<code>&lt;!-- This is a HTML Comment --&gt;</code>
<code><pre>
&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;title&gt;Title of the document&lt;/title&gt;<br>&lt;/head&gt;

&lt;body&gt;<br>&lt;!-- The content of the document... --&gt;<br>&lt;/body&gt;<br>

&lt;/html&gt;
</pre></code>
</div>
<div id="css">
    
<code><pre>#thisiscss {<br>&nbsp;&nbsp;margin: 0;<br>&nbsp;&nbsp;padding: 0;<br>}</pre></code>
    
<code><pre>.thisismorecss {<br>&nbsp;&nbsp;border: 1px solid;<br>&nbsp;&nbsp;color: white;<br>}</pre></code>
    
    <code><pre>p {<br>&nbsp;&nbsp;color: red;<br>&nbsp;&nbsp;/* This is a single-line comment */<br>&nbsp;&nbsp;text-align: center;<br>}<br><br>/* This is<br>a multi-line<br>comment */<br><br>*, *:before, *:after {margin: 0;}</pre></code>
    </div>
    <div id="js">
        <code>document.getElementById("demo").innerHTML = "Hello JavaScript";</code>
        <code><pre>var p1;<br>var p2;<br>function myFunction(p1, p2) {<br>&nbsp;&nbsp;return p1 * p2; // The function returns the product of p1 and p2<br>}</pre></code
    </div>

CSS

code {
    margin: 20px 0;
    display: block;
}
div {
    margin: 20px auto 0;
    border-bottom: 6px #333 solid;
    padding: 20px;
}
span {
    font-weight: bold;
    color: blue;
}

JavaScript

$("code").each(function () {
    code = $(this).text();
    // Tests against opening html tags, doctype & comments
    if (code.match(/(^(<([^>]+)(\s[^>])*>(.|\r|\n)*<\/\3>))|(^<!((doctype html[^>]*)|(--.*?--))>)/i)) {
        $(this).after("<span>This is HTML</span>");
    } else if (code.match(/((#|\.)?[^{\/]+{(.|\r|\n)*?})|(^\/\*(.|\r|\n)*?\*\/)/)) {
        $(this).after("<span>This is CSS</span>");
    } else {
        $(this).after("<span>This is JS</span>");
    }
});