Cara simple memasang prismjs di blog 100 Work

Cara simple memasang syntax highlighter dengan prismjs di blog 100% Work.

Kemaren sudah saya share
Hari ini saya akan share bagaimana cara memasang prismjs di blog secara sempurna.

<script>
//<![CDATA[
function loadCSS(e, t, n) { “use strict”; var i = window.document.createElement(“link”); var o = t || window.document.getElementsByTagName(“script”)[0]; i.rel = “stylesheet”; i.href = e; i.media = “only x”; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || “all” }) }
loadCSS(“https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-solarizedlight.css");<br><br>$("pre:not(:has(code))”).each(function(){$(this).wrapInner(“<code></code>”)});$(“code”).addClass(“language-markup”);

function downloadJSAtOnload() {
 (function(scripts) {
   var i = 0,
    l = scripts.length;
  for (; i<l; ++i ){
   var element = document.createElement(“script”);
   element.src = scripts[i];
   document.body.appendChild(element);
  }
 })([‘https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js’,‘https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js’]);
}
if (window.addEventListener)
        window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
 window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
//]]>
</script>

Deskripsi:

Hapus CSS yang menstyle pre, code, pre code, misal pre{font-family:…} code{font-color:…} pre code{background:…} hapus semua yang seperti itu. (diblogger biasanya di <b:skin>).

Untuk kode yang saya tandai merah bisa di ikutkan bisa pula dihapus. Itu berguna untuk menetralisir mixed content.

Cara memanggil Prismjs Syntax Highlighter:
 Cara memanggil syntax highlighter ini pun sangat simple sekali. Dengan cara berikut

<pre><code>KODE HTML CSS JS PHP DAN LAIN LAIN</code></pre>

Atau

<code>KODE HTML CSS JS PHP DAN LAIN LAIN</code>

Atau

<pre>KODE HTML CSS JS PHP DAN LAIN LAIN</pre>

Simple bukan ?.
DEMO: Codepen