Cara Menambahkan Syntax Highlighter di Blogger

Syntax Highlighter cukup dikenal oleh banyak sekali platform, contohnya WordPress, Apache, Mozilla, Yahoo, Aptana, dan banyak lainnya. Apa itu Syntax Highlighter? Kita para blogger seringkali mengembangkan script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita memakai blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. Nah, SyntaxHighlighting yaitu upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik menurut jenis kode, contohnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi. Ide ini tak lain tiba dari si pembuat SyntaxHighlighter, Alex Gorbachev (thanks for the script).

Script SyntaxHighlighter ada beberapa jenis, yang terbaru bahwasanya lebih canggih lagi. Tetapi saya akan membagi versi standard-nya alasannya yaitu mempunyai beberapa opsi ketika mouse diarahkan ke atas script (muncul di pojok kanan atas) yaitu: View Source (dalam blank page, pop out), Copy to Clipboard, dan Print. Ketiganya sangat memudahkan dalam meng-copy, melihat aba-aba dalam bentuk dan susunan aslinya, serta cetak kode. Masing-masing aba-aba diterjemahkan oleh script yang disebut Brush.

Di beberapa platform menyerupai WordPress, Drupal, dan Joomla, kita dapat memakai banyak sekali jenis modul atau plugin SyntaxHighlighter siap pakai, tetapi di Blogger, kita harus menambahkannya secara manual. Berikut step by step-nya:

Menambahkan Script dan Brush ke dalam Template

1. Buka dashboard > template > edit HTML

2. Cari ]]></b:skin> (ctrl + F dan masukkan ke dalam kotak pencarian, enter)

3.Sekaligus sebagai demo, berikut yaitu rujukan syntax highlighting-nya. Arahkan mouse ke atas script, di bab pojok kanan atas akan muncul opsi, View Source, Copy to Clipboard, dan Print. Juga ada isu script dari pembuatnya. Copy script berikut tepat di bawah ]]></b:skin>.

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>  <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>  <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>  <script language='javascript'>  SyntaxHighlighter.config.bloggerMode = true;  SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;  SyntaxHighlighter.all();  </script>  

4. Save template.

Masing-masing script brush di atas berfungsi untuk menerjemahkan dan memberi style (warna) pada banyak sekali jenis script/kode menyerupai HTML, JS, CSS, PHP, Perl, Phyton, Ruby, XML, Java, dan banyak sekali script standard lainnya. Jika anda hanya membutuhkannya untuk highlighting script tertentu yang anda butuhkan, hapus yang tidak diperlukan.

Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog

Setiap jenis aba-aba yang ingin ditampilkan di dalam halaman sebuah web biasanya memakai tag <pre>, meskipun dalam beberapa hal juga dapat memakai tag <code>. Untuk post blogger, kita akan memakai tag yang pertama. Kemudian masing-masing brush yang dibutuhkan dipanggil memakai atribut class. Contoh penulisannya:

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">

Kode Di Sini

</pre>

Pada rujukan di atas, kita lihat nantinya jenis-jenis aba-aba yang akan di highlight yaitu gabungan antara CSS, JS, PHP, SQL, dan Phyton. Jika anda hanya membutuhkan beberapa jenis saja, sekiranya yang diperlukan, maka gunakan brush sesuai jenis script saja. Misalnya, bila saya hanya butuh highlight HTML, JS, dan CSS, maka yang dibutuhkan adalah:

<pre class="brush:css, brush:html, brush:js">
Kode Di Sini
</pre>

Menggunakan yang diharapkan saja akan menghemat waktu load dan menghindari load script yang tidak perlu. Kaprikornus bila anda biasanya hanya mengembangkan aba-aba adonan yang terdiri dari 3 script umum di atas, gunakan susunan menyerupai rujukan terakhir itu.

Berikut langkah-langkah menambahkan Syntax Highlighter ke dalam Post:

1. Ketika akan memasukkan kode, pindah dari mode "Compose" ke mode "HTML"

2. Kemudian masukkan tag <pre> dan class sesuai yang diinginkan, atau anda dapat copy rujukan saya di atas.

3. Sebelum memasukkan aba-aba di antara tag <pre>, anda harus parse dulu aba-aba tersebut. Ini Penting. Karena bila tidak di parse, maka aba-aba yang dimasukkan ke dalam editor HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse aba-aba ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>.

Contoh yang benar:

<pre class="brush:css, brush:html, brush:js"> &lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=App-ID&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));
//]]&gt;
&lt;/script&gt;
</pre>

Dan berikut hasilnya:

<div id='fb-root'/> <script type='text/javascript'> //<![CDATA[ (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script> 

4. Anda dapat kembali ke mode "compose" bila ingin melanjutkan menulis, sebelum mempublikasikan artikel.

5. Done.

catatan: script akan diload paling selesai oleh browser, jadi akan muncul belakangan sehabis semua script dan elemen diload terlebih dahulu. Kaprikornus syntaxt highlighter akan muncul paling akhir.

Itu ia bagaimana cara memakai Syntax Highlighter dengan benar di Blogger. Anda bahwasanya juga dapat memakai metode yang sama pada website lain, apabila ingin menambahkannya secara manual tentunya. Syntax Highlighter untuk Blogger di atas masih memakai denah warna default, ada beberapa variasi denah warna lain yang ke depan Insya Yang Mahakuasa akan saya share. Juga. That's it for now and have a nice blogging, as always. :)

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Tweet

Subscribe to receive free email updates: