Kali ini sy akan berkongsi cara untuk memaparkan coding dengan lebih kemas dan cantik menggunakan SyntaxHighlighter. SyntaxHighlighter ini adalah open source yang menggunakan javascript. Tutorial ini amat sesuai untuk blogger2 yang membuat blog berkaitan programming. Untuk lihat demo cuba lihat coding dibawah.

// SyntaxHighlighter makes your code
// snippets beautiful without tiring
// your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
} 

Bagaimana Caranya?

1) Pergi ke Dashboard > Design > Edit HTML.
2) Copy coding dibawah dan pastekan sebelum </head>.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS--> 

3) Tekan Preview. Jika tiada masaalah tekan butang save.
4) Apabila membuat post pastikan coding berada ditengah tengah coding

<pre class="brush: html">

dan

</pre>

Jika coding anda adalah html <pre class="brush:html">
Jika coding anda adalah css <pre class="brush:css">
Jika coding anda adalah javascript <pre class="brush:js">

  


Terima Kasih Kepada Cyberack.com dan http://alexgorbatchev.com/SyntaxHighlighter/ diatas coding dan tutorial yang menarik ini.

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/syntax-highlighter-untuk-menampakkan.html">Syntax Highlighter Untuk Menampakkan Coding Lebih Kemas.</a>