Hightlight Source Code with SyntaxHighlighter

Posted on by quantro

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 :

  1. Download SyntaxHighlighter di sini atau sini.
  2. Extract file hasil download dan upload file-file tersebut ke sebuah hosting, misal http://www.example.com/
  3. 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.
  4. 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.
  5. 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 http://www.example.com (dalam contoh ini), kalau di subfolder href dan src harus diganti sesuai lokasi.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.