Syntax Highlighter adalah sebuah fitur unik yang difungsikan untuk mempermudah penempatan kode pemrograman kedalam sebuah postingan blog.
Dengan adanya Syntax Highlighter ini pula kode pemrograman yang ditempatkan pada post blog akan lebih menarik dan terlihat profesional. Sebab Syntax Highlighter ini akan menyeleksi warna secara otomatis sesuai dengan kode pemrograman yang anda tempatkan.
Jadi suatu misal anda memasukkan kode HTML kedalam post blog anda, maka nanti kode HTML tersebut akan ditandai dengan warna tertentu yang membedakan dengan kode pemrograman lain. Begitu pula dengan kode pemrograman lainnya seperti CSS dan Javascript.
Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script kode pemrograman yang anda bagikan.
Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi anda yang sering membuat post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan membuat pengunjung blog lebih merasa senang dan betah berada di blog anda.
Dari sekian banyak manfaat yang didapat dari penggunaan Syntax Highlighter, ternyata untuk membuatnya pun tidak terlalu sulit. Anda hanya perlu memasukkan beberapa kode tambahan kedalam tema blog anda, dan kemudian anda bebas menggunakan Syntax Highlighter ini.
Nah untuk dapat menggunakan Syntax Highlighter ini anda harus melewati dua tahap. Tahap pertama adalah memasang script kode Syntax Highlighter, dan tahap kedua adalah cara mengunakan Syntax Highlighter pada post blog.
Baiklah untuk anda yang sudah menanti bagaimana cara memasang Syntax Highlighter ini, silahkan ikuti saja panduan berikut:
Tahap I : Memasang Syntax Highlighter Pada Tema Blog
Catatan:1. Login ke blogger.com
Syntax Highlighter akan bekerja secara optimal, apabila script kode jquery sudah terpasang di blog anda. Contoh sederhana dari script kode jquery adalah : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
2. Pada dashboard blogger pilih Tema>>Edit HTML
3. Copy kode berikut, dan pastekan sebelum kode </head> atau </head><!--<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><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>Tahap II : Cara Menggunakan Syntax Highlighter Pada Postingan
1. Pada dashboard blogger pilih Postingan>>Entri Baru
2. Masuk pada mode "HTML" (bukan "Compose")
3. Masukkan kode berikut pada tab HTML tersebut
<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>Catatan:
Ganti tulisan yang bertanda Merah dengan kode Html, Css, atau Javascript anda.
Catatan:4. Lakukan "Pratinjau" untuk mengetahui hasilnya
Silahkan Parse terlebih dahulu kode Html, Css atau Javascript yang akan anda masukkan. Di HTML Converter
5. Selesai.
Catatan:Sedikit informasi saja bagi yang belum tahu seperti apa sih bentuk dari Syntax Highlighter. Anda bisa melihatnya pada gambar berikut ini:
Untuk penggunaan kode pemrograman lain seperti CSS, Javascript, Php, dan sebagainya. Cara penggunaannya sama saja, tidak ada perbedaan.
Penutup
Oke saya rasa anda sudah mulai paham bagaimana cara menggunakan Syntax Highlighter didalam postingan blog. Untuk selebihnya anda bisa berkreasi sendiri ya.Oh ya, sedikit informasi saja bahwa Syntax Highlighter ini tidak akan memberatkan loading blog anda. Jadi aman-aman saja untuk digunakan.
Itu saja yang bisa saya sampaikan, kurang lebihnya mohon maaf, dan akhir kata saya ucapkan terimakasih.