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:
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>
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:
Perhatikan bagian kata-kata setelah "Aliases" (dalam tanda []) itulah yang digunakan untuk mengganti bagian class="..." pada perintah <pre name="code" class="XXXXX">
Read More
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>
Setelah itu tambahkan kode berikut sebelum </body>
<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 menambahkan kode diatas maka pada setiap posting yang akan anda masukan source code (html,vb6 dll) maka tambahkan perintah berikut :
<script language='javascript'
dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/1.5.1/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
<script>
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">