Cara Mudah Memasang Syntax Highlightner di Postingan Blog - ACREZY

Blog kamu sering sharing tutorial yang mencantumkan source code? Saya merekomendasikan untuk memasang Syntax Highlightner ini agar mempercantik tampilan barisan kode di postingan kamu.

Selain itu sang pengunjung atau visitor akan merasa nyaman melihat isi konten blog kita. Dan juga isi postingan blog pun terlihat rapi seperti profesional hehe...

Syntax Highlight adalah fitur text editor yang menampilkan atau menyoroti barisan kode dalam berbagai warna agar mudah dibaca dan dipelajari.

Nah kali ini AcrezyBlog akan share cara penerapannya.

Memasang Syntax Highlightner

---

Pertama masuk ke Blogger kamu, lalu ke menu Template dan klik Edit HTML.

Sebelumnya pastikan terlebih dahulu JQuery telah ada pada blog kamu. Jika belum terapkan script berikut sebelum </head>

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

Copy dan paste kode dibawah ini sebelum </head> atau </head><!---->

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

Jika sudah tambahkan kode dibawah ini sebelum </body> atau <!----></body>

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Terakhir jangan lupa Simpan.

Cara Menggunakan di Postingan Blog

---

Setelah selesai memasang Syntax Highlightner di blog, nah sekarang cara menggunakannya di postingan blog kita.

Silahkan kamu buat entri baru dan ganti mode Compose ke HTML, karena jika di mode compose tidak akan berhasil.

Ganti text yang saya tandai dengan warna merah dengan kode CSS atau HTML atau Javascript milik kamu. Tapi sebelum itu jangan lupa untuk memparse kodenya dengan alat Parse atau Converter.

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__<pre><code>

Oke, demikian tutorial kali ini jika masih kurang paham silahkan komentar di bawah.
Semoga bermanfaat dan sampai jumpa!

Sumber: https://github.com/isagalaev/highlight.js