JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div id='comments'>Contoh link  [url=http://obesitystrike.blogspot.com/]Teks Tautan[/url]
    <br/>Contoh Kode  <i rel="code">KODE ANDA</i>

    <br />Contoh pre <i rel="pre">KODE PANJANG ANDA</i>

    <br/>contoh Gambar [img]http://3.bp.blogspot.com/-wE3ppdCEMFg/VNbmhjrI9LI/AAAAAAAAASk/4quouxwSNK0/s700/emo.png[/img]
    <br/>Contoh judul h4 <b rel="h4">JUDUL ANDA DI SINI...</b>
    <br/>Contoh teks tebal <strong>TEKS ANDA DI SINI...</strong>
    <br/>Contoh huruf miring <em>TEKS ANDA DI SINI...</em>

</div>

CSS

code, pre, i[rel="code"], i[rel="pre"] {
    font-style: normal;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: #0264BE;
}
pre, i[rel="pre"] {
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
border-left:4px solid #A30000;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}

JavaScript

(function (R, s) {
    var B = s.getElementById("comments"),
        a = B.innerHTML;
    R.d = function (g, f) {
        var e = f;
        e = e.replace(/^(<br ?\/?>|&nbsp;)+/i, "").replace(/(<br ?\/?>)+(:|;|\^|=)/ig, "<br> $2").replace(/^(&nbsp;|<br ?\/?>| <br ?\/?>)+/ig, "").replace(/\@<a href="\#c([0-9]+)\"( rel="nofollow")?>.*?<\/a>\:? ?/g, "").replace(/\[note\](.*?)\[\/note\]/ig, "<div class='note'>$1</div>").replace(/\[(youtube|iframe)\](.*?)\[\/(youtube|iframe)\]/ig, "<div class='float-video loader'><iframe class='video' src='$2' frameborder='0'></iframe></div>").replace(/<em rel="note">(.*?)<\/em>/ig, "<div class='note'>$1</div>").replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre><code>$1</code></pre>").replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1</code>").replace(/<b rel="h([0-6])">(.*?)<\/b>/ig, "<h$1>$2</h$1>").replace(/<i rel="anchor">(.*?)<\/i>/ig, "<a class='allow' href='$1' rel='nofollow'>$1</a>").replace(/\[(link|url)\](.*?)\[\/(link|url)\]/ig, "<a class='allow' href='$2' rel='nofollow'>$2</a>").replace(/\[url\=('|")?(.*?)('|")?\](.*?)\[\/url\]/ig, "<a class='allow' href='$2' rel='nofollow'>$4</a>").replace(/(<i rel="image">|\[img\])(.*?)(<\/i>|\[\/img\])/ig, "<img class='center img-float' src='$2' alt='Loading...'>").replace(/<\/h([0-6])>(<br ?\/?>)+/g, "</h$1>");
        g.innerHTML = e
    };
    d(B, a);
})(window, document);