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");

$("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

Subscribe to receive free email updates:

0 Response to "Cara simple memasang prismjs di blog 100% Work"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.