Cara Membuat Syntax Highlighter Kotak Script di Postingan Blogger

Jagoandzgn.com - Selain mempercantik tampilan kode didalam postingan blog, Syntax Highlighter juga bermaksud untuk memudahkan pembaca mengenali sebuah jenis kode yang berikan oleh Penulis melalui sebuah kode. Efek yang diberikan syntax lainnya agar memberikan kenyamanan saat membaca isi konten blog dan bagi penus atau kita sebut sebagai admin akan merasa menjadi lebih professional dalam menyajikan artikel tutorial dalam blog mereka.

Apa Itu Syntax Highlighter ?

Syntax Highlighter adalah salah satu script yang dapat membuat kode - kode pemrograman menjadi lebih berwarna pada aslinya. kode warna tersebut dapat kita lihat apabila blognya berisi tentang tutorial dan berbagi tips tentang blog yang didalamnya berisikan script HTML, Javascript, Dan lain sebagainya.

Cara kerja Syntax ini cukup menarik sama halnya dengan Blockquote tetapi bedanya untuk fitur blackquote warna teksnya hanya satu warna saja, Untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual, tetapi dengan Syntax ini kamu tidak perlu lagi mengubah kode-kodenya menjadi warna secara manual, dia akan otomatis berubah warnanya sesuai dengan kode yang diberikan.

Cara Membuat Syntax Highlighter Keren di Postingan Blogger

1. Silahkan kamu login ke Blogger dengan menggunakan Akun Gmail kamu.

2. Masuk kemenu Dashboard Blogger > klick Menu TEMA > klick Tombol Edit HTML
3. Silahkan kamu cari kode berikut ini </head> dan pastekan script dibawah ini tepat sebelum kode </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>

4. Kemudian cari kode berikut ini </body> dan pastekan kode dibawah ini tepat sebelum kode </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>

5. Setelah itu klick Simpan dan Selesai.

Cara Penulisan Syntax Highlighter di Postingan Blog

Setelah kamu melakukan pemasangan kode Syntaxnya, Nah langkah selanjutnya adalah penulisannya didalam postingan blog. Buat postingan baru di blog kamu, Kemudian untuk penulisannya tambahkan kode ini di tab HTML.

Khusus untuk kode HTML/JS silahkan Parse dahulu dengan Parse HTML, Setelah itu masuk ke masuk postingan dan Klick HTML ( Bukan Compose )

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

Ganti kode yang ditandai pasa kode diatas dengan kode CSS/HTML/JS. Khusus untuk kode HTML/JS silahkan Parse dahulu dengan Parse HTML DISINI.