Kamis, 09 Oktober 2008

Menampilkan Syntax Highlighter (Javascript based)

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

S
yntax
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/




Tidak ada komentar:

Posting Komentar