Cara Menampilkan Syntax Highlighter Pada Blog

Sebenarnya cara ini telah saya bahas sebelumnya, namun mungkin di beberapa template blog cara yang saya bahas sebelumnya tidak berjalan sebagaimana mestinya, dan kali ini saya akan mencoba menerapkan cara kedua yang saya ketahui.

Jika anda belum mengetahui apa itu Syntax Highlighter anda dapat membaca artikel saya yang seblumnya di sini.

Menambahkan Script dan Brush ke dalam Template Blog

Sesuai dengan pembahasan kita kali ini, jika kita ingin menampilkan Syntax Highlighter pada blog maka terlebih dahulu kita harus menambahkan script dan brush kedalam template yang kita miliki, namun hal itu tidak diperlukan jika kita menggunakan wordPress, Jomla, Drupal dll, karena tiap2 platform telah memberikan plugin yang dapat digunakan.

Berikut langkah-langkah untuk menambahkan script dan brush kedalam template blog.

Login dengan akun blogger anda kemudian pilih Template
Lalu pilih edit HTML
Cari kode ]]></b:skin> pada template. Untuk memudahkan gunakan CTRL+F pada teks editor template lalu ketik ]]></b:skin> dan enter
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 = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
SyntaxHighlighter.all(); 
</script>

Save template

Adapun fungsi dari masing-masing script diatas adalah untuk dan memberi style pada berbagai jenis script/kode seperti HTML, JavaScript, CSS, PHP, XML, Java, dan lain sebagainya, namun jika anda hanya ingin menampilkan beberapa source code saja maka anda dapat menghapus yang tidak anda perlukan.

Cara Mengaplikasikan Syntax Highlighter di dalam postingan Blog

Setiap jenis sorce code yang ingin ditampilkan di artikel sobat biasanya diawali dengan tag <pre> atau <code>. Adapun contoh penulisannya adalah sebagai berikut:

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

Input Sorce code disini

</pre>

Untuk menghindari terjadinya waktu load yang terlalu lama, gunakan class seperlunya saja, seperti berikut:

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

Input Sorce code disini

</pre>

Cara menambahkan syntax highlighter kedalam postingan artikel

Pada saat anda ingin memasukkan sorce code, rubah terlebih dahulu setingan compose menjadi HTML
Kemudian tambahkan tag <pre> dan class seuai dengan yanga anda butuhkan. Atau anda bias lihat contohnya diatas.
Jika anda ingin melanjutkan penulisan artikel rubah mode HTML menjadi Compose terlebih dahulu.
Setelah semua sesuai dengan harapan anda selanjutnya publiskan.