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'/>
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>
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/
0 Comments
