Syntax Highlighter cukup dikenal oleh berbagai platform, misalnya
WordPress, Apache, Mozilla, Yahoo, Aptana, dan banyak lainnya. Apa itu
Syntax Highlighter? Kita para
blogger
seringkali berbagi script/kode untuk blogger atau siapapun yang
membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita
menggunakan blockquote sebagai "wadah" dari script/kode tersebut dan
menandai dengan beberapa warna khusus sebagai indikator atau petunjuk.
Nah,
SyntaxHighlighting
adalah upaya untuk mempresentasikan script/kode tersebut dengan cara
dan tampilan yang lebih baik berdasarkan jenis kode, misalnya
Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi. Ide ini tak
lain datang dari si pembuat
SyntaxHighlighter,
Alex Gorbachev (
thanks for the script).
Script SyntaxHighlighter ada beberapa jenis, yang terbaru sebenarnya
lebih canggih lagi. Tetapi saya akan membagi versi standard-nya karena
memiliki beberapa opsi saat 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 kode dalam bentuk dan susunan aslinya, serta cetak kode.
Masing-masing kode diterjemahkan oleh script yang disebut Brush.
Di beberapa platform seperti WordPress, Drupal, dan Joomla, kita bisa
menggunakan berbagai 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 adalah contoh syntax highlighting-nya.
Arahkan mouse ke atas script, di bagian pojok kanan atas akan muncul
opsi, View Source, Copy to Clipboard, dan Print. Juga ada info script
dari pembuatnya. Copy script berikut tepat di bawah ]]></b:skin>.
16 | <script language='javascript'> |
17 | SyntaxHighlighter.config.bloggerMode = true; |
19 | SyntaxHighlighter.all(); |
4. Save template.
Masing-masing script brush di atas berfungsi untuk menerjemahkan dan
memberi style (warna) pada berbagai jenis script/kode seperti HTML, JS,
CSS, PHP, Perl, Phyton, Ruby, XML, Java, dan berbagai 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 kode yang ingin ditampilkan di dalam halaman sebuah web
biasanya menggunakan tag <pre>, meskipun dalam beberapa hal juga
bisa menggunakan tag <code>. Untuk post blogger, kita akan
menggunakan tag yang pertama. Kemudian masing-masing brush yang
dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
Kode Di Sini
</pre>
Pada contoh di atas, kita lihat nantinya jenis-jenis kode yang akan di
highlight adalah 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, jika 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 diperlukan saja akan menghemat waktu load dan
menghindari load script yang tidak perlu. Jadi jika anda biasanya hanya
berbagi kode campuran yang terdiri dari 3 script umum di atas, gunakan
susunan seperti contoh 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 bisa copy contoh saya di atas.
3. Sebelum memasukkan kode di antara tag <pre>, anda harus parse dulu kode tersebut.
Ini Penting.
Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor
HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan
HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>.
Contoh yang benar:
<pre class="brush:css, brush:html, brush:js"> <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>
</pre>
Dan berikut hasilnya:
02 | <script type='text/javascript'> |
05 | var js, fjs = d.getElementsByTagName(s)[0]; |
06 | if (d.getElementById(id)) return; |
07 | js = d.createElement(s); js.id = id; |
08 | js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID"; |
09 | fjs.parentNode.insertBefore(js, fjs); |
10 | }(document, 'script', 'facebook-jssdk')); |
4. Anda bisa kembali ke mode "compose" jika ingin melanjutkan menulis, sebelum mempublikasikan artikel.
5. Done.
catatan: script akan diload paling akhir oleh browser,
jadi akan muncul belakangan setelah semua script dan elemen diload
terlebih dahulu. Jadi syntaxt highlighter akan muncul paling akhir.
Itu dia bagaimana cara menggunakan Syntax Highlighter dengan benar di
Blogger. Anda sebenarnya juga bisa menggunakan metode yang sama pada
website lain, apabila ingin menambahkannya secara manual tentunya.
Syntax Highlighter untuk Blogger
di atas masih menggunakan skema warna default, ada beberapa variasi
skema warna lain yang ke depan Insya Allah akan saya share. Juga. That's
it for now and have a nice blogging, as always. :)
0 komentar:
Post a Comment