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 :

  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.

Advertisements

15 thoughts on “Hightlight Source Code with SyntaxHighlighter

  1. 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….

    1. 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

      isi kode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s