Hightlight Source Code with SyntaxHighlighter
Beberapa programmer yang membuat blog mereka sendiri terkadang ingin berbagi sesuatu tentang programming. Mereka terkadang menuliskan source code programming yang mereka gunakan untuk membuat sebuah tampilan tertentu. Dan biasanya mereka berbagi souce code secara mentah. Alih-alih menuliskan secara indah biar mudah dibaca, beberapa progammer menuliskannya agar mudah di-copy. Tidak salah sih, tetapi kadang agak sulit untuk memisahkan antara source code dengan tulisan sang programmer.
Mereka (beberapa programmer menuliskan seperti ini) :
<html>
<head><title>judul<title></head>
<body><?php echo ‘isinya’; ?></body>
</html>
Tidak seperti ini :
<html> <head><title>judul<title></head> <body><?php echo 'isinya'; ?></body> </html>
Nha menurut anda (pembaca) bagaimana? Enakan dibaca yang ke-2 kan? Di contoh kedua kita bisa membaca dan membedakan dengan mudah, membaca line number, membaca code-nya, untuk copy juga mudah tinggal klik view plain maka akan tampil code-nya dalam bentuk plain, dan tinggal kita copy. Selain itu tampilan web kita jadi semakin cantik dengan adanya highlighting ini, sehingga bisa jadi semakin banyak pembaca web kita.
Jadi bagaimana menerapkannya?? Bagi mereka yang blogging di wordpress tinggal menggunakan
isi code
Untuk yang blogging di situs lain misal blogspot (setau saya belum mencantumkan highlighter ini), atau weblog yang dibikin sendiri caranya :
- Download SyntaxHighlighter di sini atau sini.
- Extract file hasil download dan upload file-file tersebut ke sebuah hosting, misal http://www.example.com/
- Udah deh tinggal pakai, caranya include file yang dibutuhin misal :
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushBash.js"></script> <script type="text/javascript" src="scripts/shBrushCpp.js"></script> <script type="text/javascript" src="scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="scripts/shBrushDiff.js"></script> <script type="text/javascript" src="scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="scripts/shBrushJava.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script> <script type="text/javascript" src="scripts/shBrushPlain.js"></script> <script type="text/javascript" src="scripts/shBrushPython.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushScala.js"></script> <script type="text/javascript" src="scripts/shBrushSql.js"></script> <script type="text/javascript" src="scripts/shBrushVb.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
- Pada baris pertama merupakan core script yang akan dipakai.
- Pada baris kedua merupakan script yang akan mengatur untuk penulisan Bash.
- Pada baris ketiga merupakan script yang akan mengatur untuk penulisan C++.
- Pada baris selanjutnya merupakan script yang akan mengatur untuk penulisan bahasa-bahasa lain.
- Pada 2 baris terakhir merupakan core style dan style tiap bahasa.
- Setelah itu tuliskan fungsi javascript yang akan membuat efek source code kita jadi ter-highlighting :
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
- Dua baris diatas merupakan script konfigurasi yang akan membuat efek source code kita menjadi ter-highlighting.
- Terakhir tuliskan syntax source code anda dengan cara dimasukkan ke dalam tag <pre class:”brush [bahasa]“> syntax</pre>
misal :function test() : String { return 10; }
Udah deh selese….
Semoga bermanfaat….
Nb:
- tag pre bisa diganti dengan tag lain, untuk lebih jelasnya baca di sini.
- untuk yang make wordpress.com seperti saya bisa di liat di sini untuk lebih jelasnya.
- kode yang otomatis terhighlight adalah kode dalam situs www.example.com (dalam contoh ini), kalau di subfolder href dan src harus diganti sesuai lokasi.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Regard,
Quantro a.k.a Royyan A.
hohohooho… lebih dinamis bro.. mansstaabbbee..
salam kenal, nice blog..
http://id.latuminggi.com/2009/06/groups-connects-obsessively.html
GROU.PS - Latuminggi
June 15, 2009 at 21:50
siipp, langsung bungkus nih, hehehe…
Thanks ya Mas.
riez
June 19, 2009 at 15:39
same2semoga berguna
quantro
June 27, 2009 at 16:21
Happy blogoversary!
Teena in Toronto
July 7, 2009 at 08:38
wedew mantaab mas baru tau saya ternyata wp bisa dikasih highlight gitu .. coba dulu deh
MacFamous
July 21, 2009 at 22:50
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 !!! trims….
ugo
January 12, 2010 at 20:33
nanti saya coba dulu deh,,…
quantro
June 16, 2010 at 10:06
langkah kedua :
Extract file hasil download dan upload file-file tersebut ke sebuah hosting, misal http://www.example.com/
maksudnya gemana mas?
saya kan pake wordpress,servernya juga kan gak bisa diakses…???
iya gak,,kalo gak maaf n koreksi mas tolong?
Adiputra
February 13, 2010 at 11:28
yup, emang kalo hsot di wp tidak bisa, ini contoh saya kalo hosting sendiri….
kalo di wp seinget saya dah ada secara default, tinggal kita manggil dnegan
quantro
June 16, 2010 at 10:03
mangstabhh pak
~~
/me coba ni ahh ..
Nightwalker Team
March 15, 2010 at 07:10
masih bigung… ada pembahasa step by step nya
jurug
March 23, 2010 at 14:51
nanti kalo sempet cek aja di royyan.azizi.me ,mungkin akan saya bahas ulang….
quantro
June 16, 2010 at 10:02
eh klo itu mah buat yang di blogspot bukan?
klo di php bukannya udah ada fasilitas bawaannya ya?
neng ucrit
June 14, 2010 at 11:07
kekna ada, belom sempet meriksa….
quantro
June 16, 2010 at 09:58
wah kalo udah liat script2 kayak gitu saya malah pusing gak ngerti soalnya.
hamba
June 27, 2010 at 11:55