Syntax Highlighter

public class Contoh {
 public static void main(String [] args) {
  System.out.println("Ini adalah sebuah script java");
  System.out.println("Post ini menunjukkan bagaimana penggunaan Syntax Highlighter pada post di Blog");
 }
} 

Sudah pernah melihat kode yang dibungkus dengan tampilan seperti diatas ?? Pingin tau bagaimana cara membuatnya .
Maka anda membutuhkan sebuah program yang bernama Syntax Highlighter. Sebenarnya untuk menggunakannya anda perlu mendownload programnya di website resminya di
Syntax Highlighter
Agak ribet memang. Tapi untuk diblog kebetulan karena saya juga hanya tau bagaimana cara menggunakannya di blog, ternyata cukup mudah. Berikut tutorialnya ..

Anda cukup mengcopy codenya sekali, karena ada beberapa code yang dipost double
1. Download terlebih dahulu template blog anda, ekstensi XML bukan ?
2. Editlah template tersebut dengan teks editor kesukaan anda. Notepad juga bisa tapi sangat tidak disarankan, saya menggunakan Notepad++
3. Sebelum ]]></b:skin>
Copy kan code css berikut .

.dp-highlighter

{

 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;

 font-size: 12px;

 background-color: #E7E5DC;

 width: 99%;

 overflow: auto;

 margin: 18px 0 18px 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: #fff;

 margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */

 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: #F8F8F8;

 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: #F8F8F8;

 color: gray;

 overflow: hidden;

 width: 100%;

}


.dp-highlighter .columns div

{

 padding-bottom: 5px;

}


.dp-highlighter ol li.alt

{

 background-color: #FFF;

 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 Verdana, 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: 9px;

 color: #a0a0a0;

 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: Tahoma, 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; }

4. Sebelum </head>
Copy kan code berikut

5. Sebelum</body>
Copy kan code berikut :

6. Upload kembali template xml yang telah kita edit tersebut.
7. Untuk menggunakannya anda perlu menggunakan syntax seperti ini :
<pre class="html" name="code">
Ini adalah sebuah code
</pre>
Yang akan menghasilkan

Ini adalah sebuah code

Referensi saya dalam membuat post ini adalah bos-masbow.blogspot.com