JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<script src="http://yourjavascript.com/1314964411/highlight-pack.js"></script>
<blockquote>
&lt;h3 class='date-header'&gt;&lt;span class='author'&gt;&lt;b:if cond='data:top.showAuthor'&gt;&lt;data:top.authorLabel/&gt;&lt;/b:if&gt; : &lt;a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='post-author vcard'&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='fn'&gt;&lt;data:post.author/&gt;&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;&lt;/a&gt; &lt;/span&gt;<br />
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;span class='clock'&gt; Posted on &lt;data:post.dateHeader/&gt; - &lt;a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'&gt;&lt;abbr class='updated' expr:title='data:post.timestampISO8601'&gt; &lt;data:post.timestamp/&gt;&lt;/abbr&gt;&lt;/a&gt; &lt;b:if cond='data:post.allowComments'&gt; with &lt;a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'&gt;&lt;b:if cond='data:post.numComments == 0'&gt;No comments&lt;/b:if&gt;&lt;b:if cond='data:post.numComments == 1'&gt;1 comment&lt;/b:if&gt;&lt;b:if cond='data:post.numComments &amp;gt;= 2'&gt;&lt;data:post.numComments/&gt; comments&lt;/b:if&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;/span&gt;&lt;/h3&gt;<br />
</blockquote>
<script>
      hljs.initHighlightingOnLoad();
    hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

   var $span = $("blockquote");
$span.replaceWith(function () {
    return $('<code/>', {
        html: this.innerHTML
    });
});
    $( "code" ).wrap( "<pre/>" );
    </script>

CSS

blockquote{font:italic 14px Georgia;margin:10px 25px;padding:10px;line-height:1.6em;color:#333;background:#ddd;border-left:5px solid #aaa;transition:all .3s ease-in-out;position:relative;}

.hljs{display:block;overflow-x:auto;padding:.5em 1em 1em;background:#272822;color:#f8f8f8;font-family:Consolas,Monaco,'Andale Mono',monospace;font-size:14px;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;tab-size:4;hyphens:none;margin:.5em 0;border-radius:.3em;}
code mark{background-color:#999 !important}
.hljs-shebang,.hljs-comment,.hljs-javadoc{color:#7c7c7c}
.hljs-keyword,.hljs-tag,.tex .hljs-command,.hljs-request,.hljs-status,.clojure .hljs-attribute{color:#96cbfe}
.hljs-sub .hljs-keyword,.method,.hljs-list .hljs-title,.nginx .hljs-title{color:#ffffb6}
.hljs-string,.hljs-tag .hljs-value,.hljs-cdata,.hljs-filter .hljs-argument,.hljs-attr_selector,.apache .hljs-cbracket,.hljs-date,.coffeescript .hljs-attribute{color:#a8ff60}
.hljs-subst{color:#daefa3}
.hljs-regexp{color:#e9c062}
.hljs-title,.hljs-sub .hljs-identifier,.hljs-pi,.hljs-decorator,.tex .hljs-special,.hljs-type,.hljs-constant,.smalltalk .hljs-class,.hljs-javadoctag,.hljs-yardoctag,.hljs-phpdoc,.hljs-dartdoc,.nginx .hljs-built_in{color:#ffffb6}
.hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-number,.hljs-variable,.vbscript,.hljs-literal{color:#c6c5fe}
.css .hljs-tag{color:#96cbfe}
.css .hljs-rules .hljs-property,.css .hljs-id{color:#ffffb6}
.css .hljs-class{color:#fff}
.hljs-hexcolor{color:#c6c5fe}
.hljs-number{color:#ff73fd}
.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:.7}