Cara simple memasang prismjs di blog 100 Work Cara simple memasang syntax highlighter dengan 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