Membuat Syntax Highlighter

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan istilah kategori. Fitur Syntax Highlighter mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup. Ide dibalik pembuatan Syntax Highlighter adalah untuk memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server. Syntax Highlighter menggunakan bahasa reguler untuk melakukan parse terhadap text. Syntax Highlighter akan membantu anda  untuk mengirim potongan kode secara online dengan mudah dan tampilan cantik. Syntax Highlighter 100% menggunakan JavaScript.  

Beberapa fitur SyntaxHighlighter adalah sebagai berikut :

• Mendukung beberapa format bahasa;
• Support terhadap semua media browser seperti : Google Chrome, Mozilla FireFox, Internet Explorer, Opera dan lainnya;
• Mudah untuk digunakan dan dikembangkan;
• 100% untuk pengguna tanpa adanya campur tangan server;
• Sangat ringan;

Untuk Membuat Syntax Highlighter diperlukan bebeapa lngkah seperti berikut ini. Silahkan anda login ke dashboard blog anda. Copy kode berikut dan letakan kode di bawah  tag </head>. 

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
</script>

Selanjutnya Copy dan letakan kode berikut di atas kode ]]></b:skin>

.dp-highlighter { font-family: "Georgia", "Monaco", "Courier New", Courier, monospace; font-size: 12px; background-color: #D0D0D0; border : 1px solid #0000CC; width: 99%; height: 100px; overflow: auto; margin: 10px 0 10px 0 !important; padding-top: 1px; /* adds a little border on top when controls are hidden */ }/* clear styles */.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span { margin: 0; padding: 0; border: none; }.dp-highlighter a,.dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; }.dp-highlighter .bar { padding-left: 45px; }.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left: 0px;}.dp-highlighter ol{list-style: decimal; /* for ie */background-color: #f8f8f8; margin: 0px 0px 1px 33px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ background-color: #D0D0D0; padding: 0px; color: #5C5C5C; }.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{ list-style: none !important; margin-left: 0px !important; }.dp-highlighter ol li,.dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #FFFFFF; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; }.dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div { border: 0;}.dp-highlighter .columns { background-color: #FFFFFF; color: #f8f8f8; overflow: auto; width: 100%;}.dp-highlighter .columns div{ padding-bottom: 5px;}.dp-highlighter ol li.alt { background-color: #f8f8f8; color: inherit; }.dp-highlighter ol li span{color: black;background-color: inherit;}/* Adjust some properties when collapsed */.dp-highlighter.collapsed ol{margin: 0px;}.dp-highlighter.collapsed ol li{display: none;}/* Additional modifications when in print-view */.dp-highlighter.printing { border: none;}.dp-highlighter.printing .tools{display: none !important;}.dp-highlighter.printing li{display: list-item !important;}/* Styles for the tools */.dp-highlighter .tools{padding: 3px 8px 3px 10px; font: 9px Georgia, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C;}.dp-highlighter.nogutter .tools{ border-left: 0;}.dp-highlighter.collapsed .tools{border-bottom: 0;}.dp-highlighter .tools a{ font-size: 12px; color: #000000; background-color: inherit; text-decoration: none; margin-right: 10px; }.dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; }/* About dialog styles */.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }.dp-about td { padding: 10px; vertical-align: top; }.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }.dp-about .title { color: red; background-color: inherit; font-weight: bold; }.dp-about .para { margin: 0 0 4px 0; }.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }.dp-about .close { font-size: 11px; font-family: Georgia, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }/* Language specific styles */.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }.dp-highlighter .string { color: blue; background-color: inherit; }.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Catatan : Pada bagian paling atas dari kode tersebut lakukan beberapa pengaturan, lihat kode awal adalah sebagai berikut :
.dp-highlighter { font-family: "Georgia", "Monaco", "Courier New", Courier, monospace; font-size: 12px; background-color: #D0D0D0; border : 1px solid #0000CC; width: 99%; height: 100px; overflow: auto; margin: 10px 0 10px 0 !important; padding-top: 1px; }

• Huruf yang ditampilkan adalah "georgia" dengan ukuran 12 pixel; 
• warna background #DoDoDo;
• border 1px dengan warna #0000CC(biru);
• Height 100px = tinggi syntax hightlighter;
• overflow auto = menampilkan scroll, untuk menyembunyikan scroll silahkan ganti "auto" dengan "hidden";

Selanjutnya cari tag </body>, paste kode berikut di atas kode tersebut.

<!-- Add-in Script for syntax highlighting  --><script language='javascript'>dp.SyntaxHighlighter.BloggerMode();dp.SyntaxHighlighter.HighlightAll('code');</script>

Simpan template anda. Untuk penggunaan Syntax Higlighter silahkan letakan script atau kode css seperti contoh di bawah ini. Untuk masing-masing kode diberi class masing-masing, berikut adalah kode untuk memasang javascript, css, dan xml :
<pre name="code" class="JScript"> 
Letakan Javascript di sini
</pre>
<pre name="code" class="Css">
Letakan css di sini
</pre>
<pre name="code" class="Xml"> 
Letakan Xml di sini
</pre>
Kembali ke atas