Cara Menampilkan Syntax Highlighter Di Blogspot

Apakah itu Syntax Highlighter?

Syntax highlighter itu semacam plugin untuk memformat tampilan kode program sedemikian rupa sehingga tampilannya jadi menarik. Dengan plugin syntax highlighter, kode program akan di highlight warna font-nya sehingga
memudahkan untuk membaca kode tersebut.

Apa saja macam plugin syntax highlighter?

Ada banyak plugin yang bisa meng-highlight kode program yang kita pasang di blog kita. Yang ane bahas di sini adalah plugin SyntaxHighlighter.

Bagaimana cara kerja plugin SyntaxHighlighter?

Ada dua cara tentang bagaimana SyntaxHighlighter bekerja.
Pertama, dengan tag <pre>. Yang kedua dengan tag <script>. Ane akan bahas yang tag <pre> saja karena ini lebih gampang :). Pelajari kedua cara tersebut secara lengkap di Manual Installation SyntaxHighlighter.
Dengan tag <pre>, setelah plugin ter-install, kita cukup mengapit kode program yang ingin kita tampilkan dengan tag <pre class="brush: x"></pre>. brush: x tersebut nantinya bisa kamu sesuaikan dengan kode program apa yang kamu ingin highlight. Untuk JavaScript seperti ini:

?

1 2 3

<pre class="brush: js">var element = document.getElementById("element"); var value = document.getElementByTagName("a"); </pre>

Cara menginstall SyntaxHiglighter di Blogger Blogspot

Secara garis besar, ada tiga langkah saja untuk menginstall SyntaxHighlighter:

1. Include atau sertakan file-file yang dibutuhkan plugin di header blog kamu
2. Sertakan atribut class dengan value tertentu pada tag <pre>
3. Panggil fungsi SyntaxHighlighter.all() di akhir posting.

Langkah Pertama, Sertakan File-File Yang Dibutuhkan SyntaxHiglighter

Paste kode berikut sebelum kode </head> di template blog kamu

?

1 2 3 4 5 6 7 8 9 10

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"> </script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"> </script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"> </script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"> </script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"> </script>

Peringatan, kode di atas adalah untuk meng-highlight kode HTML dan JavaScript saja. Untuk kode program lainnya, kamu bisa menambahkan brush lainnya.

Langkah Kedua, sertakan atribut class dengan value tertentu

Misalkan kita ingin meng-highlight kode HTML. Ini contoh kode yang kita buat di posting blog kita. Pastikan kamu paste/buat kodenya di modus HTML, bukan Compose.

?

1 2 3

<pre class="brush: html"><div class="contoh"> Menampilkan SyntaxHighlighter di posting blog tidaklah susah. Klik <a href="http://ifaniqbal.blogspot.com/2012/07/cara-menampilkan-syntax-highlighter-di.html">di sini</a> untuk belajar lebih lanjut.</div> </pre>

Langkah Terakhir, panggil fungsi SyntaxHighlighter.all()

Maksudnya adalah paste kode berikut di akhir posting yang memuat kode yang ingin di highlight. Berikut ini kode nya.

?

1 2 3 4

<script type="text/javascript"> <!-- ifaniqbal.blogspot.com --> SyntaxHighlighter.all(); </script>