Cara Memasang Syntax Highlighter di Blog dengan Mudah

Syntax Highlighter merupakan fitur yang baru-baru ini digunakan oleh blog saya (Han Farhan) karena kebetulan blog ini sering membuat artikel soal pengalaman Tutorial Blogging yang sering membagikan kode HTML dan Javascript, sangat jelas Syntax Highlighter sangat berguna bila diterapkan untuk blog seperti ini.

Syntax Highlighter merupakan sebuah kolom yang cara kerjanya hampir sama dengan Blockquote dengan melakukan klik 2x maka semua kode yang ada dikolom akan terblock dan siap untuk disalin tapi bedanya ini memang dikhususkan untuk sebuah kolom HTML, Javascript maupun Bahasa Pemrograman lainnya. Karena jika menggunakan blockquote untuk memberikan warna teks yang berbeda harus dilakukan manual dan juga style yang tidak terlalu mirip dengan bahasa pemrograman, pada intinya Syntax Highlighter lebih baik dibanding blockquote untuk penempatan dan pemindahan sebuah kode seperti html, javascript dan bahasa pemrograman lainnya.

Selain Fungsi dan Manfaatnya yang sangat berguna ternyata dengan memasang Syntax Highlighter pada Blog akan membuat tampilan isi arikel lebih profesional dan rapih dimata pengunjung maupun kita sendiri.

Syntax Highlighter ini dilengkapi dengan CSS yang akan membuat setiap kode yang ada didalam kolom akan memiliki warna yang berbeda tapi teratur, syntax highlighter juga sudah mendukung sifat Responsive yang akan tetap rapih bila kita akses dalam perangkat mobile.

Disini Saya akan membagikan caranya secara lengkap, seperti Syntax Highlighter yang juga sudah digunakan blog ini:

Cara Memasang Syntax Highlighter pada Template Blog

Langkah 1: Buka Dashboard Blogger pada alamat www.blogger.com, Pilih Tema kemudian pilih Edit HTML.

Langkah 2: Pada tampilan Edit HTML silahkan klik CTRL+F lalu cari </head>. Silahkan Anda tambahkan kode berikut 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>

Perlu dicatat: Pastikan Tema blog Anda sudah mendukung jquery library. Contoh JQuery Library <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Langkah 3: Selanjutnya cari </body>. Silahkan Anda tambahkan kode berikut ini tepat diatasnya:

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

Langkah 4: Jika sudah selesai klik Simpan Tema dan lanjut pada langkah berikutnya cara penggunaan di postingan blog.

Cara Menggunakan Syntax Highlighter di Postingan Blog

Langkah 1: Kembali buka Dashboard Blogger pada alamat www.blogger.com, kemudian buat Postingan Baru.

Langkah 2: Pada Postingan Baru pilih mode HTML dan tambahkan kode berikut.

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

Langkah 3: Setelah itu untuk menambahkan kode kedalam kolom Syntax Highlighter harus kembali dalam mode Compose. Ganti __TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__ dengan kode yang ingin Anda isi. [Lihat GIF]

Langkah 4: Jika sudah selesai Publikasikan.

Bagaimana Tutorial Blogging yang saya bagikan kali ini seputar Cara Memasang Syntax Highlighter di Blog dengan Mudah. Semoga bermanfaat dan membantu untuk semua pembaca artikel blog ini.

refrensi: