› ›

Menampilkan Sorce Code Pada Postingan Blog Menggunakan Syntax Highlighter

Written By November 26, 2015 1 Comment Edit
Saat kita ingin membuat sebuah artikel yang membahas tentang suatu program komputer, maka biasanya kita perlu untuk menampilkan source code dari program tersebut, jika sorce code tersebut hanya kita ketikkan seperti biasa maka akan terlihat kurang menarik dan kurang jelas, untuk itu kita perlu menggunakan Syntax Highlighter.
Contoh Syntax Highlighter

Syntax Highlighter adalah suatu fitur dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna yang bertujuan untuk memudahkan programmer dalam membaca dan menganalisa source code tersebut. Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter yaitu :
    1. Adanya fasilitas Print untuk kode
    2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows
    3.  Adanya fasilitas Help untuk melihat bantuan.

Untuk contoh Syntax Highlighter temen-temen bisa lihat kode javascript yang saya gunakan pada postingan ini. Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya satu persatu :
    1. Login dengan akun blogger anda kemudian pilih Template
    2. Klik EDIT HTML (sebaiknya anda backup terlebih dahulu template lama anda)
    3. Simpan kode berikut Setelah kode <head> atau sebelum kode </head> 
         <b:if cond='data:blog.pageType == &quot;item&quot;'>  
    <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>
   </b:if>
    4. Kode diatas berfungsi untuk menampilkan source code dengan bahasa pemrograman PHP, Javascript, HTML, XML, CSS dan lain-lain. Untuk lebih jelas tentang bahasa pemrograman yang disupport bisa dilihat di situs resmi Syntax Highlighter di http://alexgorbatchev.com
    5. Dengan menerapkan tag <b:if cond='data:blog.pageType == &quot;item&quot;'> berarti kita hanya menggunakan script saat tampil halaman posting saja. Hal ini bertujuan untuk meringankan beban loading blog
    6. Cari kode ]]></b:skin> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik ]]></b:skin>
    7. Masukkan kode CSS berikut ini diatas kode ]]></b:skin> 
       /*style for syntax highlighter*/  
 .dp-highlighter  
 {  
 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  
 font-size: 12px;  
 line-height: 1.8em;  
 background-color: #E7E5DC;  
 width: 99%;  
 overflow: auto;  
 margin: 18px 0 18px 0 !important;  
 padding-top: 1px;   
 text-align: left;  
 /* 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: 1.8em;  
 }  
 .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; }
    8. Cari kode </body> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik </body>
    9. Taruh kode javascript ini tepat diatas kode </body> 
         <script language='javascript'>  
    dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);  
   </script>
    10. roses setup syntax highlighter selesai sampai disini, selanjutnya simpan template anda
Langkah selanjutnya adalah cara memasang source code pada halaman postingan blog :
    1. Pastikan semua proses setup diatas telah dilakukan dengan benar
    2. Pada halaman entri baru, klik mode HTML lalu taruh kode berikut ini (contoh untuk menampilkan kode PHP) pada letak source code di postingan 
       <pre class="php" name="code">  
   ...  
 </pre>
    3. Taruh source code pada titik-titik diantara tag <pre> dan </pre> seperti contoh berikut ini : 
       <pre class="php" name="code">  
   <?php  
     echo "cara Membuat Sorce Code Php Di dalam Blog";  
   ?>  
 </pre>
    4. Silahkan ganti parameter pada tag class sesuai jenis source code yang akan ditampilkan, misalnya untuk menampilkan kode CSS ganti PHP dengan CSS
Demikianlah cara untuk menampilkan sorce code pada blog dan membuatnya terlihat lebih rapi dan menarik.

1 Response to "Menampilkan Sorce Code Pada Postingan Blog Menggunakan Syntax Highlighter"

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel