JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<pre><code>&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i &lt; image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('main-wrapper', 200);
//]]&gt;
&lt;/script&gt;
&lt;/b:if&gt;
&lt;/b:if&gt;</code></pre>

CSS

.db_post-title a:visited,code a,pre{border:none;background:none}pre.numbered .line-number{display:none!important}a.button{text-decoration:none}a[href]:after{content:&quot; (&quot; attr(href) &quot;)&quot;}abbr[title]:after{content:&quot; (&quot; attr(title) &quot;)&quot;}a[href^=&quot;javascript:&quot;]:after,a[href^=&quot;#&quot;]:after,a[href$=&quot;.jpg&quot;]:after,a[href$=&quot;.jpeg&quot;]:after,a[href$=&quot;.png&quot;]:after,a[href$=&quot;.gif&quot;]:after,a[href$=&quot;.bmp&quot;]:after,a[href$=&quot;.JPG&quot;]:after,a[href$=&quot;.JPEG&quot;]:after,a[href$=&quot;.PNG&quot;]:after,a[href$=&quot;.GIF&quot;]:after,a[href$=&quot;.BMP&quot;]:after,a.button:after,code a[href]:after,.db_post-title a:after{content:&quot;&quot;}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.no-print,.tooltip,.jsfiddle-demo,blockquote:before,blockquote:after{display:none!important}blockquote,pre,code{background:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:inherit;page-break-inside:avoid}}.db_date-published.no-print {display: block;margin: -10px 20px 30px 0;text-align: right;font-weight: bold;line-height: 1;color: #A2A2A2;}span.list-media-content{color:#999}.status-msg-wrap{display:none;}#blog-pager-older-link{margin-left:50%;margin-right:50%}#blog-pager{margin:auto;width:100%;padding:10px;background:#333}#blog-pager-older-link img{position:relative;left:-40px}#Blog1_blog-pager-older-link{text-decoration:none}span.datetime.secondary-text{float:right;position:relative;bottom:10px}cite.user{position:relative;bottom:10px}span.my-comment{position:absolute;right:0;padding-right:40px;top:0;opacity:0;transition-duration:.4s;transition-timing-function:ease-out}span.nomor-comment:before{content:&#39;\f086&#39;;font-family:fontawesome;float:right;margin-right:15px}span.nomor-comment:hover...

JavaScript

/*! Auto select */window.db_autoSelect=function(a){a.ondblclick=function(){var b,r;if(window.getSelection){b=window.getSelection();r=document.createRange();r.selectNodeContents(a);b.removeAllRanges();b.addRange(r)}else if(document.selection){b=document.selection.createRange().text;r=document.body.createTextRange();r.moveToElementText(a);r.select()}}};window.ngd_addNumber=function(){var a=document.getElementsByTagName('pre'),pl=a.length,s;for(var i=0;i<pl;++i){s='<span class="line-number">';a[i].id=!a[i].id?'code-block:'+(i+1):a[i].id;if(/(^| )numbered( |$)/.test(a[i].className)){var b=a[i].getElementsByTagName('code')[0];for(var j=0,k=b.innerHTML.split(/\n/).length;j<k;++j){s+='<span id="code-line:'+(i+1)+"-"+(j+1)+'"><span>'+(j+1)+"</span><em>code-line:"+(i+1)+"-"+(j+1)+"</em></span>"}a[i].innerHTML=s+='</span>'+a[i].innerHTML+'<span class="cl"></span>'}db_autoSelect(a[i].getElementsByTagName('code')[0]);if(window.location.hash&&/code\-line\:([0-9]+)\-([0-9]+)|code\-block\:([0-9]+)/.test(window.location.hash)){var h=window.location.hash;window.location.hash=h}}};var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var...