0 Cara Membuat Syntax Highlighter Pada Blog

Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Teks area atau lainnya, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. Dari segi tampilan juga menurut saya lebih rapi dan menarik kaya yang di pake di blog ini nich...Ok sobat blogger gak usah panjang lebar deh basa basinya..mari kita langsung ke pokok pembahasan...eng ing eng.....

Caranya :

• Login Blogger => Rancangan => Edit HTML
• Download Template Lengkap=>centang pada kotak Expand Template Widget 
• Cari kode berikut : </head> gunakan aja [CTRL]+[F] biar cepat. . .
• Setelah ketemu copy  kode dibawah ini lalu pastekan diatas kode tersebut

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

• Setelah bagian itu sudah lalu
• Cari lagi kode berikut : </b:skin> gunakan aja [CTRL]+[F] biar cepat. . .
• lalu pastekan kode dibawah ini diatasnya. .

.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; }

• Setelah itu cari lagi kode yang seperti ini dan letakkan kode dibawah ini diatas kode tersebut

<script language="javascript">

    dp.SyntaxHighlighter.BloggerMode();  

    dp.SyntaxHighlighter.HighlightAll('code');  

    </script>  

• Save template

Untuk pemanggilan nya di edit htlm postingan gunakan kode ini:

UNTUK CODE CSS:
<pre class="css" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE HTML:
<pre class="html" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE JAVASCRIPT:
<pre class="java" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>