Membuat syntax highlighter keren di blog

  Apa itu syntax highlighter? 
  Syntax highlighter merupakan penyedia fitur dari text editor. Khususnya editor source seperti code, html, css, php, jQuery, sehingga bahasa pemograman lainnya.

 Contohnya Seperti apa?
 Syntax highliter mulai banyak digunakan blogger user. Jadi,ada kemungkinan kalau anda tidak menemui website. Berikut ini screenshoot nya :

                                                                     

                                          
  Live demo = Klik salah satu artikel yang membahas tentang widget.

Cara pembuatannya?
 Cara pembuatannya tidaklah mudah dan tidaklah sulit. Anda hanya perlu mengikuti tutorialnya di bawah ini :
1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang Expand template widget -> Gunakan Ctrl dan F.
4. Cari kode </head>. Jika sudah ketemu, letakkan kode dibawah diatas tag </head>

<!-- Add-in CSS for syntax highlighting -->  

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>  

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>  

<!-- Add-in Script for syntax highlighting -->  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'></script>  

  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>  

  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script>  

  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>  

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>  

<script language='javascript'>  

SyntaxHighlighter.config.bloggerMode = true;  

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';  

SyntaxHighlighter.all();  

</script>  

<!-- End code hilight -->  

5. Save template.

   Sebenarnya, masih ada kode yang perlu disisipkan, supaya syntax highliter-nya muncul. Ada kode yang harus anda save/hafal. Karena, ada 2 kode khusus untuk menempatkan HTML dan CSS di syntax highlighter.

Untuk kode CSS :

<pre class="brush: css"> KODE CSS ANDA </pre>

Untuk kode HTML :

<pre class="brush: HTML"> KODE HTML ANDA </pre>

   Letakkan salah satu kode diatas ke Entri baru, lalu ubah mode compose menjadi HTML. Jangan lupa, untuk meletakkan script CSS/HTML di mode Compose. Selesai.


*Jika anda tidak berhasil, bisa diadukan lewat komentar.