Fungsi Syntax Highlighter di Blog dan Cara Membuatnya

Anda pasti sering menemukan kotak berisikan kode saat membaca artikel tutorial blogging atau desain web. Kotak tersebut dikenal dengan nama syntax highlighter, sebuah editor teks yang berfungsi untuk menempatkan berbagai jenis bahasa pemrograman atau skrip, seperti CSS, HTML, JavaScript, dan lain-lain.

Berbeda dengan block quote, editor teks yang satu ini memiliki warna dan font yang berbeda. Tujuannya supaya pembaca artikel bisa membedakan antara teks biasa dan bahasa pemrograman yang ditampilkan sehingga lebih mudah dipahami. Ditambah lagi, kode atau skrip yang ada di dalam kotak juga mudah disalin dan ditempel di editor lain.

Adapun kode syntax highlighter yang akan kita gunakan kali ini dikembangkan oleh blog caramanual.com. Teksnya di dalamnya akan berubah warna dan susunannya lebih rapi ketimbang menggunakan block quote atau teks biasa.

Bagi Anda yang tertarik untuk memasang syntax highlighter di blog, cukup ikuti beberapa langkah mudah berikut ini.

Cara Membuat Syntax Highlighter di Blogger

#1. Masuk ke dasbor Blogger, lalu pilih blog yang ingin Anda tambahkan kotak editor ini.

#2. Klik menu “Tema” > lalu klik “Edit HTML”.

#3. Salin kode CSS di bawah, kemudian Anda tambahkan di atas kode ]]></b:skin> atau </style>.

/* Syntax Highlighter */

pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}

code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}

pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}

pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}

pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}

pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}

pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}

pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#eee8d5}

#4. Setelah itu tambahkan juga kode berikut sebelum kode </head>.

<!-- Syntax Highlighter -->

<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>

<script>hljs.initHighlightingOnLoad();</script>

<!-- End Syntax Highlighter -->

#5. Klik “Simpan” untuk menyimpan perubahan.

Jika Anda memahami kode di atas, Anda bisa membuat kotak editor atau style dengan warna yang berbeda di sini.

Cara Menerapkan Syntax Highlighter di Postingan

Belum selesai sampai di sini, karena syntax highlighter tidak akan muncul secara otomatis melainkan harus Anda atur secara manual. Ketika Anda membuat postingan baru, maka lakukan cara di bawah ini untuk memunculkan syntax highlighter:

#1. Buat entri baru, lalu tulis artikel sampai selesai terlebih dahulu.

#2. Setelah itu siapkan kode atau skrip yang ingin Anda sisipkan. Masuk ke tampilan “HTML”.

#3. Gunakan kode ini: <pre><code>Kode di sini</code></pre>

Contoh:

<pre><code><script type='text/javascript'>         

//<![CDATA[         

$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});

//]]>          

</script></code></pre>

Parse HTML

Apabila kode yang ingin Anda tambahkan adalah HTML, maka Anda perlu melakukan parse dengan menggunakan tool Parse HTML. Salin dan tempel kode HTML yang ingin Anda gunakan, lalu parse di Blogcrowds, setelah itu salin lagi kode hasil parse ke postingan.

Akan tetapi untuk kode CSS dan JavaScript, Anda tidak perlu melakukan parse. Terkecuali jika ternyata syntax highlighter yang Anda buat gagal atau tidak muncul.

Demikian penjelasan tentang fungsi syntax highlighter dan bagaimana cara membuatnya di Blogger. Selamat mencoba.

Share :