Bag of Air: 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/

Bag of Air

Friday 10 August 2012

SyntaxHighlighter

2 comments: