Cara Membuat Syntax Highlighter di Blogger

Cara Membuat Syntax Highlighter di Blogger
Pentingnya mengetahui cara membuat syntax highlighter di Blogger, khususnya bagi blog dengan topik tutorial yang di dalamnya menyisipkan beragam kode seperti HTML, CSS, JavaScript dan lain-lain.

Sebenarnya tanpa syntax highlighter sekalipun Anda tetap dapat meletakan kode dalam postingan. Hanya saja kode tersebut akan terlihat tidak rapih dan terlihat seolah postingan Anda error karena adanya kode yang dianggap tidak jelas.

Cara Membuat Syntax Highlighter di Blogger


Dengan adanya syntax highlighter maka kode tersebut akan menjadi terlihat lebih rapih, tertata dan menarik dipandang.

Karena itu bagi Anda yang ingin kode dalam postingan blog terlihat rapi dan tertata, maka ikut panduan berikut ini.

Login ke Blogger > pilih menu Tema > klik Edit HTML, kemudian tambahkan kode CSS di bawah ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;.

<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>

Kemudian tambahkan kode berikut ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;.

<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>

Klik Simpan tema untuk menyimpan pengaturan.

Cara Menggunakan Syntax Highlighter di Postingan


Jika Anda sudah melakukan  tahap yang di atas, itu artinya syntax highlighter sudah ada dalam fitur blog milik Anda. Sekarang tinggal cara menggunakannya saja.

Untuk membuat syntax highlighter dalam postingan maka gunakan kode di bawah ini

<pre><code>TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>

Ganti kode yang ditandai tersebut dengan kode HTML, CSS, JavaScript dan kode lainnya yang Anda inginkan.

Penting! Sebelum menggunakan syntax highlighter ke dalam postingan, parse terlebih dahulu kode yang akan Anda gunakan.

Hasilnya?


Jika penasaran seperti apa hasil dari tutorial ini, maka Anda dapat lihat langsung pada syntax highlighter yang ada dalam postingan ini. Karena tutorial ini yang saya gunakan dalam postingan saat ini.

Sekian Cara Membuat Syntax highlighter di Blogger, semoga bermanfaat.
Berikan Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel