Seorang programmer sangat sering melakukan posting yang berhubungan dengan source code baik yang berupa project atau cuma sebuah sample kode. Agar kode terlihat menarik dan tidak membosankan salah satu caranya adalah dengan metode Syntax Highlighter pada kode tersebut atau memberikan warna pada kode-kode tersebut.
Pada setiap editor, bahkan hampir semua code editor pasti mempunyai fasilitas ini. Tujuan utamanya udah pasti agar kode mudah dipahami dan tidak membosankan.
Begitu juga dengan blogspot.com sangat banyak plugin-plugin yang menyediakan fasilitas ini.
Berikut contoh-contohnya :
Pada postingan ini saya mencoba untuk menggunakan Google Code Pretity, berikut langkah-langkahnya:
Login ke blog anda kemudian lakukan langkah-langkah berikut
- Edit Template Blogger.
- klik Disain.
- Klik Edit Html.
- centang Expand Widget Templates.
- Sebelum tag </head> tambahkan kode berikut
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
Kode ini untuk memasukkan file javascript dari google-pretty-code ke dalam file blogspot kita.
- Setelah kita masukkan file dilangkah sebelumnya sekarang kita load dengan cara menambahkan properti onload pada tag body.
Cari tag <body> pada file template kemudian tambahkan baris berikut sehingga jadi seperti ini.<body onload="prettyPrint()" >
- Contoh Penggunaan kode.
Semua settingan telah selesai setelah menyimpang file template, berikut cara penggunaanya,
Untuk semua kode yang ingin ditambahkan letakkan kode tersebut diantara tag berikut
<pre class="prettyprint lang-php"> KODE ANDA DISINI </pre>
Setelah kode lang diatas ganti dengan bahasa yang digunakan, misalkan ingin menggunakan bahasa html maka class yang digunakan adalah "prettyprint lang-html".
Bandingkan kedua kode Lisp berikut, yang pertama tidak menggunakan prettyprint dan yang kedua sebaliknya.
Yang pertama :(defun new-line() "make empty newline" (interactive) (end-of-visual-line) (indent-for-tab-command) (newline))
Yang kedua :
(defun new-line() "make empty newline" (interactive) (end-of-visual-line) (indent-for-tab-command) (newline))
Meski tak sebagus Syntax Highlighter (menurut saya pribadi) tapi kode ini cukup ringan sehingga waktu load blog kita jadi lebih cepat, namun pengembangan termasuk lama, bisa dilihat dari sini, dibagian akhirnya ditulis kalau update terakhirnya adalah Rabu, 19-Juli-2010. Sudah hampir 6 bulan dari postingan ini ditulis.
Sumber:
http://google-code-prettify.googlecode.com/svn/trunk/README.html
http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/
1 comments:
klw programmer pernah patah hati juga ga di...???
Post a Comment