Memasukan Source Code Dalam Postingan Dengan SyntaxHighlighter

Akhir-kahir ini saya sedang mencari beberapa tutorial tentang pemograman terutama C#.net dan beberapa kali menemukan blog yang menyediakan contoh source code dengan tampilan yang cukup menarik dan sangat mudah dibaca, saya pikir itu salah satu fasilitas wordpress.

Tapi belakang saya tahu bahwa itu adalah salah satu fungsi yang dibuat oleh "Alexgorbatchev" yang dinamakan SyntaxHighlighter, karena saya juga menemukan salah satu blog (blogspot) menggunakan SyntaxHighlighter akhirnya setelah melihat source code dari blog tersebut ternyata memang dia menggunakan SyntaxHighlighter, setelah tahu bahwa blogspot pun bisa menggunakannya maka saya pun mulai mencobanya.

Fasilitas ini sangat berguna jika kita menuliskan posting disertai contoh source code misalahnya html,php,vb, vb.net,C#.net dll, karena lebih mudah dibaca, misalkan anda mau menuliskan tutorial visual basic 6 dengan beserta source code maka akan tampak seperti diawah ini:

'_______________________________________
'   APIs for show hidden files
'_______________________________________
Private Const MAX_PATH = 260
Private Type FILETIME
    dwLowDateTime As Long
    dwHighDateTime As Long
End Type
Private Type WIN32_FIND_DATA
    dwFileAttributes As Long
    ftCreationTime As FILETIME
    ftLastAccessTime As FILETIME
    ftLastWriteTime As FILETIME
    nFileSizeHigh As Long
    nFileSizeLow As Long
    dwReserved0 As Long
    dwReserved1 As Long
    cFileName As String * MAX_PATH
    cAlternate As String * 14
End Type

Lebih enak dilihat dan mudah dimengerti bukan jika dibandingkan dengan ini:
'_______________________________________
' APIs for show hidden files
'_______________________________________
Private Const MAX_PATH = 260
Private Type FILETIME
dwLowDateTime As Long
dwHighDateTime As Long
End Type
Private Type WIN32_FIND_DATA
dwFileAttributes As Long
ftCreationTime As FILETIME
ftLastAccessTime As FILETIME
ftLastWriteTime As FILETIME
nFileSizeHigh As Long
nFileSizeLow As Long
dwReserved0 As Long
dwReserved1 As Long
cFileName As String * MAX_PATH
cAlternate As String * 14
End Type

Jika anda ingin menggunakannya silahkan kunjungi SyntaxHighlighter, ada dua pilihan untuk menggunakannya yaitu :
1. Download SyntaxHighlighter lalu upload ke hosting yang anda miliki
2. Langsung memanggil dari hosting yang disediakan Alexgorbatchev

Kemudian anda tambahkan kode pada template sebelum </head>

<link href='http://alexgorbatchev.com/pub/sh/1.5.1/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushXml.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushCss.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushVb.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushJScript.js'/>

Setelah itu tambahkan kode berikut sebelum </body>

<script language='javascript'
dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/1.5.1/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
<script>

Setelah menambahkan kode diatas maka pada setiap posting yang akan anda masukan source code (html,vb6 dll) maka tambahkan perintah berikut :
contoh jika anda ingin menuliskan kode html
<pre name="code" class="html">
... kode html....
</pre>

Atau jika anda ingin menuliskan source visual basic:
<pre name="code" class="vb">
... source code visual basic....
</pre>

Sedikit tambahan cara menggunakan "class" yang sesuai dengan kode yang akan anda tuliskan:
1. ['cpp','c','c++'] untuk c++
2. ['php'] untuk php
3. ['delphi','pascal'] untuk delphi & pascal
4. dll

Jika masih bigung buka directory "Script" kemudian buka salah satu file *.js yang ada didirectory tersebut, misalnya "shBrushCSharp.js" setelah itu lihat bagian akhir kode setelah "Aliases"

Contoh:

/*
 * JsMin
 * Javascript Compressor
 * http://www.crockford.com/
 * http://www.smallsharptools.com/
*/

dp.sh.Brushes.Delphi=function()
{var keywords='abs addr and ansichar ansistring array as asm begin boolean byte cardinal '+'case char class comp const constructor currency destructor div do double '+'downto else end except exports extended false file finalization finally '+'for function goto if implementation in inherited int64 initialization '+'integer interface is label library longint longword mod nil not object '+'of on or packed pansichar pansistring pchar pcurrency pdatetime pextended '+'pint64 pointer private procedure program property pshortstring pstring '+'pvariant pwidechar pwidestring protected public published raise real real48 '+'record repeat set shl shortint shortstring shr single smallint string then '+'threadvar to true try type unit until uses val var varirnt while widechar '+'widestring with word write writeln xor';this.regexList=[{regex:new RegExp('\(\*[\s\S]*?\*\)','gm'),css:'comment'},{regex:new RegExp('{(?!\$)[\s\S]*?}','gm'),css:'comment'},{regex:dp.sh.RegexLib.SingleLineCComments,css:'comment'},{regex:dp.sh.RegexLib.SingleQuotedString,css:'string'},{regex:new RegExp('\{\$[a-zA-Z]+ .+\}','g'),css:'directive'},{regex:new RegExp('\b[\d\.]+\b','g'),css:'number'},{regex:new RegExp('\$[a-zA-Z0-9]+\b','g'),css:'number'},{regex:new RegExp(this.GetKeywords(keywords),'gm'),css:'keyword'}];this.CssClass='dp-delphi';this.Style='.dp-delphi .number { color: blue; }'+'.dp-delphi .directive { color: #008284; }'+'.dp-delphi .vars { color: #000; }';}
dp.sh.Brushes.Delphi.prototype=new dp.sh.Highlighter();dp.sh.Brushes.Delphi.Aliases=['delphi','pascal'];

Perhatikan bagian kata-kata setelah "Aliases" (dalam tanda []) itulah yang digunakan untuk mengganti bagian class="..." pada perintah <pre name="code" class="XXXXX">