Pages

Sep 22, 2009

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">

13 comments:

alamendah said...

walah dalah pagi2 sudah disuguhi ilmu yang menarik. Terima kasih.
Untuk link, mohon tunggu sebentar, satu atau dua hari nanti pasti saya add balik. Hari2 ini sibuk banget.

Ratusya said...

udah baca ampe akhir, tapi... ga ngerti :(
maaf ya.. secara sayah juga pake yang gratisan, jadi ga peduli & ga ngerti ama syntax2 ginian

Aneka Tips said...

Duh bangun tidur dah ngelihat rumus :D

irvan said...

@Aneka Tips, liatnya tar sore aja kwkwkw

Seno said...

Keren sob, saya download ya. Thanks.

Zippy said...

Waduw, gak mudeng mas ama ginian...
Mumet baca kode2'x, xixiixi...

Aneka Tips said...

Mampir ah sambil jjs (subuh :D )

irvan said...

@Aneka Tips, bener juga dah subuh ni

New Blogger said...

Mantap nich infonya, jadi pengen nyoba nich :D

syd said...

apa bedanya dengan C++ ?

irvan said...

@syd, beda apanya ni ?, kalo buat manggilnya pake salah satu perintah ini['cpp','c','c++'] -> misal class="ccp"
Dan untuk peggunaannya di case sensitif, jadi misalnya di vb6, antara "string" dan "String" dianggap beda

ugo said...

Tapi dengan cara seperti itu masih ada masalah..sy sudah pernah coba tp saat kita pengen edit walaupun kita tidak merubah isi nya , saat kita tekan misal "update" maka hasilnya akan berubah jadi kl kita udah posting kode ya sudah jangan diedit.!!!mungkin barangkali ada solusi mohon kirim email sy "email ada di web sy" trims....

Unknown said...

Terima kasih infonya :D