JSFiddle - React, Tailwind, and code Playground

by funkwurm

HTML

<div id="board" class="original">
    <div>#include &lt;iostream.h&gt;</div>
    <div></div>
    <div>int main(int a, int b){</div>
    <div></div>
    <div>return 0;</div>
    <div>}</div>
</div>

CSS

.original {
    width: 50%;
    margin: 0 auto;
    padding: 1em;
    background: #0092cf;
    color: #fff;
}
.original span {
    background: green;
}

JavaScript

$('#board').children().each(function(index, child) {
    var text = $(child).html();
    text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
    text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
    $(child).html(text);
});