JSFiddle - React, Tailwind, and code Playground

by Dan Cotora

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, .copy {
    width: 50%;
    margin: 0 auto;
    padding: 1em;
}

.original {
    background: #0092cf;
    color: #fff;
}

.copy {
    background: #92cf00;
    color: #fff;
}

.copy span {
    background: #cf0092;
    color: #fff;
}

CoffeeScript

$ () ->
    board = $('#board')
    copy = board.clone()
    copy.toggleClass('original copy')
    board.after(copy)
    
    copy.children().each () ->
        child = $(@)
        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