Menambah Fitur Syntax Highlighter Pada Template Blogger

Menyajikan artikel atau postingan blog yang sedap dipandang dan enak dibaca tentu merupakan hal yang penting dalam aktivitas menulis di blog (nge-blog). Berbagai media dari mulai teks, gambar, animasi, video, audio bahkan script bahasa pemrograman terkadang harus kita sisipkan dalam postingan blog. Tentunya media-media tersebut digunakan sesuai dengan bidang tulisan atau arah postingan blog kita. Salah satu yang akan saya ulas disini adalah bagaimana menggunakan Syntax Highlighter pada postingan blog di Blogger.

Apa itu Syntax Highlighter..?
Syntax Highlighter merupakan sebuah fitur dimana kita dapat menyisipkan kode/script bahasa pemrograman tertentu dengan tetap mempertahankan style sesuai dengan bahasa pemrogramannya, baik warna-warnanya, posisi kodenya dan lain sebagainya.

Contoh Script HTML tanpa Syntax Highlighter :

<div class="alert alert-warning alert-dismissible">

    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

    <h4><i class="icon fa fa-warning"></i> Peringatan!</h4>

    Anda telah berusaha untuk mengakses halaman yang bukan milik anda!!.

</div>

Contoh Script HTML dengan Syntax Highlighter :

<div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4><i class="icon fa fa-warning"></i> Peringatan!</h4>
    Anda telah berusaha untuk mengakses halaman yang bukan milik anda!!.
</div>

Oke.. paham ya maksudnya, sekarang bagaimana cara menambahkan fitur Syntax Highlighter, Langsung saja ikuti langkah-langkah berikut:

Pertama, Silahkan masuk ke Blogger, kemudian pilih Tema dan Klik Edit HTML, lalu tambahkan script di atas baris </head> , silahkan copy paste script berikut:

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

Kedua, Cari baris </body> dan tambahkan script di bawah ini di atas / sebelum script </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.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Setelah kedua langkah tersebut dilakukan, silahkan Klik Simpan Tema.

Ketiga, Menggunakan Syntax Highlighter untuk menyisipkan kode program pada postingan blog dengan cara menulis posting dalam mode HTML dan menambahkan script berikut:

<pre><code> DISINI KODE HTML/CSS/JAVASCRIPT </code></pre>

Khusus untuk HTML/CSS/JAVASCRIPT kodenya harus di konversi dulu menggunakan HTML Converter

Catatan:Cara ini akan berfungsi dengan baik jika di tema blognya sudah menambahkan library jQuery. Contoh: <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

---

Sumber : https://github.com/isagalaev/highlight.js
Image Designed by Freepik