Friday, 10 August 2012

SyntaxHighlighter

Gara gara postingan gue sebelum ini, jadi ngubek ngubek yang namanya SyntaxHighlighter. Buat apa nih qaqaq? Buat kalau kamu nulis sourcecode di blog atau website, jadinya cantik kaya gini :
public function dummy(e:Event):void {
    //kodingan
}
Gaul banget kan ini? Cara pakenya juga gampang kok, tinggal masukin kode dibawah ini di dalem tag <head> :
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
Di baris kedua dan ketiga, gue import shBrushAS3.js dan shBrushPhp.js jadi gue bisa nampilin sourcecode di blog gue pakai bahasa ActionScript3 dan PHP. SyntaxHighlighter ini support banyak bahasa kok, untuk bahasa-bahasa yang lainnya ada di sini. Dan tema-nya pun banyak, bisa dipilih-pilih di sini.

Setelah menentukan bahasa apa saja yang akan dipakai untuk blog/website kamu, sekarang tinggal pakai deh! Caranya, di postingan atau di <body> kamu tambahin tag <pre></pre> misalnya:
<pre class="brush: as3" name="code">
    public function dummy(e:Event):void {
        //kodingan
    }
</pre>
Maka jadinya akan seperti contoh pertama yang diatas tadi :
public function dummy(e:Event):void {
    //kodingan
}
Cantik bener kan hasilnya :')

source : http://alexgorbatchev.com/SyntaxHighlighter/

2 comments:

  1. Nice post dhik! Selama ini selalu penasaran biar warna-warni gimana ternyata pake ini toh

    ReplyDelete