Wahib
Wahib Tech Enthusiast.

Cara Memasang Syntax Highlighter Super Keren di Blogger

Cara Membuat Syntax Highlighter Seperti Kode Editor di Blogger
Cara Membuat Syntax Highlighter

Membuat Syntax Highlighter di Blogger? Kenapa enggak, semua pasti bisa asalkan kita mau berusaha. Tutorial dibawah ini adalah cara memasang syntax highlighter yang mudah untuk diikuti, silahkan langsung saja disimak ya!

Coba lihat gambar dibawah gan, pasti kalian udah sering lihat kan? Terutama ketika kita sedang mencari tutorial kodingan, pasti udah sering menjumpai yang namanya syntax highlighter seperti ini. 


Syntax Highlighter di Blogger
Langkah memasang Syntax Highlighter di Blogger

Apa itu Syntax Highlighter?

Syntax Highlighter atau Penyorotan Sintaksis adalah sebuah style box highlighter yang berisi baris kode sehingga dapat memudahkan pengunjung blog untuk menerima tutorial programming. Sebenarnya ada banyak jenis <pre><code> alias syntax highlighter yang beredar di internet, tak terkecuali pun juga berlaku untuk platform Blogger.

Ada macam - macam tujuan dibuatnya syntax highlighter, selain untuk memudahkan pengunjung blog, tentu saja agar baris postingan blog menjadi lebih rapi dan tertata. Coba bayangkan kita nulis 200 baris kode, dan itu nggak pakai syntax highlighter, seperti apa berantakannya coba? Membayangkan aja udah mikir, eh enggak banget deh. Maka dari itu, saya disini mau share bagaimana cara membuat syntax highlighter di Blogger ala Arlina Design. (Ini blog rujukan sejuta umat blogger hehe)

Ilmu yang saya dapat dari mbak Arlina adalah tentang library highlight.js. Jadi, library tersebut udah diciptakan oleh seseorang untuk memudahkan membuat syntax highlighter pada html tanpa harus repot-repot mengkodenya dari awal. Repositorynya bisa kalian cek disini. Kelebihan dari library tersebut adalah style nya tuh bagus gitu, mirip - mirip sama kode editor seperti Visual Code Studio atau Atom Editor.

Cara Memasang Syntax Highlighter dengan Highlight.js

1. Pertama, kalian login ke dashboard Blogger kalian.
2. Setelah itu, kalian pergi ke menu Tema > Edit HTML
3. Kalian cari kode </head> kemudian tambahkan kode dibawah ini tepat diatas </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 langsung ke langkah selanjutnya. Kalian cari kode </body>, dan pastekan kode dibawah ini tepat diatas </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. Simpan semua perubahan.

Cara Menerapkan Syntax Highlighter 

1. Buat sebuah pos baru, kemudian pergi ke tab HTML (lihat gambar dibawah)
Cara Menerapkan Syntax Highlighter
Menerapkan syntax highlighter di blogger
2. Gunakan kode dibawah ini untuk membuat syntax highlighter dalam postingan
# disini kodingan
<pre><code><!-- Disini taruh kodingan (harus diparse dulu) --></code></pre>
3. Mohon perhatikan, agar baris kodingan dapat muncul tanpa error, harap kodingan kalian di parse dulu. Bisa memakai tools ini HTML Parse by Wahib.NET
4. Selesai, selamat menggunakan!

Jika masih ada yang perlu ditanyakan atau mengalami kebingungan, jangan malu - malu untuk bertanya pada kolom komentar di bawah ya!

Wahib
Wahib  Tech Enthusiast.

Comments