SyntaxHighlighter merupakan cara mudah untuk menampilkan penggalan kode pos-line agar terlihat lebih menarik. Dengan menambahkan Syntax Highlighter, pembaca akan lebih mudah memahami setiap syntax baris kode yang anda tampilkan sebagaimana bahasa program aslinya. Syntax Highlight ini menggunakan 100% JavaScript based, jadi anda bisa menampilkannya pada platform (blog/site) apa saja, termasuk blogger tentunya.
SyntaxHighlighter menggunakan ekspresi reguler untuk parse teks. Jadi jika anda hanya mencoba untuk menyorot beberapa puluhan baris kode, mungkin tidak ada masalah. Tapi jika anda mencoba untuk menyorot 10kb lebih nilai teks, kemungkinan akan ada masalah karena lamanya waktu dalam proses eksekusi.
Bahasa Program yang didukung:
| Language | Aliases |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
Cara mengguakan Syntax highlighter pada blogger.
1. Silahkan anda download dulu semua filenya.
2. Extrack file SyntaxHighlighter_1.5.1.rar
3. Upload semua file Java Srcipt (pada folder Scripts) ke server milik anda,pages.google.com misalkan.
4. Letakan kode ini di bawah kode <head>
<link href='http://alamat-server-anda.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://alamat-server-anda.com/shCore.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCss.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJava.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPython.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushSql.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushVb.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushXml.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushRuby.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shCore.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCss.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJava.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPython.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushSql.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushVb.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushXml.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushRuby.js' type='text/javascript'/>
5. Kemudian letakan ini diatas kode </body>
<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
6. Simpan sebelumnya hasil kerja anda
Cara mengaktifkan kode pada halaman Post Editor
Letakkan kode anda pada halaman ditandai dengan tag <pre>. Kemudian menetapkan nama atribut untuk kode kelas dan atribut ke salah satu bahasa alias yang ingin Anda gunakan. (lihat tabel alias untuk type class)
<pre name="code" class="c-sharp"> ... some code here ... </pre>
Alternatif untuk <pre> adalah dengan menggunakan tag <textarea>. Tidak ada masalah dengan < karakter dalam kasus ini. Masalah utamanya adalah <pre> tidak dapat bekerja dengan baik jika tag JavaScript tetap digunakan untuk beberapa alasan (di RSS feed misalnya)
<textarea name="code" class="c#" cols="60" rows="10"> ... some code here ... </textarea>
Maaf saya tidak menyertakan contoh nyata dalam tutorial ini, namun anda jangan kuatir, ini sudah saya uji coba dan 100% berhasil.
Pelajari kode selengkapnya di alamat ini http://code.google.com/p/syntaxhighlighter/
Posting Komentar