Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

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

BERI KOMENTAR

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)
 

Back to Top