JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<pre  class="db-pre-Tooltip" title='klik ganda untuk seleksi otomatis kode'>
    <code>
        function framePreloader(frame, url, h) {
    $(frame).html('&lt;iframe src="' + url + '" height="' + h + '" frameborder="0" width="100%"&gt;&lt;/iframe&gt;');
}

function frameReloader(triggerParent, title, target, url, h, text) {
    $(triggerParent).append(' - &lt;a href="#"&gt;' + title + '&lt;/a&gt;');
    $('a', triggerParent).on("click", function() {
        $(target).html('&lt;iframe width="100%" src="' + url + '" height="' + h + '"&gt;&lt;/iframe&gt;');
        $('#loadingtext').html('&lt;span&gt;' + text + '&lt;/span&gt;');
        $('iframe').load(function() {
            $('#loadingtext span').remove();
        });
        return false;
    });
}

$(window).bind("load", function() {
    framePreloader('#discussionFrame', 'comm-frame.html', '770');
    framePreloader('#fbLikeFrame', 'http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHompimpa-Alaihum-Gambreng%2F298981640118767&amp;width=250&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%233c3c3c&amp;stream=false&amp;header=false&amp;height=288', '288');
    framePreloader('#recentPostsLoader', 'postingterbaru.html', '420');

    if(window.location.hash) {
        var urlHash = window.location.href.split('#')[1];
        $('html, body').animate({
            scrollTop: $('.' + urlHash).offset().top - 30
        }, 4000, function() {
            $('.' + urlHash).find('div.cm_entry').css('border', '2px solid yellow');
            $('.' + urlHash).find('div.avatar-image-container').css({
                'padding': '0px',
                'border': '5px solid yellow'
            });
        });
    }
});
    </code>
</pre>

CSS

body{background-color:#369;}
pre,i[rel="pre"] {padding:.8em 1em;margin:0 auto;width:700px;background-color:#2f3741;border-left:4px solid #900;font-size:11px;
color:#839496;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;
line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,
pre .javadoc {color: #586e75;font-style: italic;}pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {color: #859900;}pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,
pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color: #7195a3;}pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {color: #569dcf;}pre .attribute,
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {color: #aa985a;}pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,
pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo {color: #509a55;}
pre .deletion {color: #dc322f;}pre .tex .formula {background: #073642;}
.pre-tooltip {
 display:none;
 position:absolute;
 border:1px solid #333;
 background-color:#161616;
 border-radius:5px;
 padding:10px;
 color:#fff;
 font-size:12px Arial;
}

JavaScript

$(document).ready(function() {
$('.db-pre-Tooltip').hover(function(){
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="pre-tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        $(this).attr('title', $(this).data('tipText'));
        $('.pre-tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY + 10;
        $('.pre-tooltip')
        .css({ top: mousey, left: mousex })});});

/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return...