Cara Membuat Syntax Highlighter di Postingan Blogspot

Berbicara tentang Syntax Highlighter tentunya tidak akan lepas dari kode rumit yang terdapat dalam sebuah Blog atau editor source code bahasa pemrograman. Apa sebenarnya yang dimaksud dengan Syntax highlighter dan apa fungsinya? saya akan mencoba menerjemahkan arti Syntax highlighter dalam pengertian saya. Syntax highlighter menurut saya adalah fitur khusus untuk proses pemindahan sebuah code bahasa pemrograman tertentu dimana tulisan, warna teks, posisi sama persis dengan yang terdapat di sebuah code bahasa pemrograman untuk di pindahkan atau di copy ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajari.

Syntax highlighter hampir sama dengan fitur Blockquote namun bedanya untuk fitur blockquote warna tulisan biasanya hanya satu warna saja, untuk mengubah warna sesuai dengan kode aslinya harus dilakukan secara manual. Jadi intinya Syntax highlighter lebih efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Untuk memasang fitur  Syntax Highlighter di WordPress terutama wordpress berbayar dan blog student sangatlah mudah hanya perlu menginstal plugin Syntax Highlighter yang sudah tersedia. Sementara untuk blog berplatfrom  blogspot relatif sedikit sulit. Untuk Anda yang ingin menggunakan fitur Syntax Highlighter ke dalam blogspot berikut kami berikan penjelasan lengkapnya.

DEMO

Silahkan masuk ke dasbord blogspot pilih template > edit HTML > cari kode ]]></b:skin>,  untuk mencari kode ini klik mouse tepat di kotak kode HTML- pada keybord tekan Ctrl+F, setelah muncul kolom search pastekan kode ]]></b:skin> ke dalam kotak kemudian tekan enter. Setelah kode ]]></b:skin> ketemu masukkan atau paste code berikut in tepat diatas kode ]]></b:skin>.

<!--SYNTAX HIGHLIGHTER BEGINS--> 
.dp-highlighter{font-family:Consolas, Monaco, "Courier New", Courier, monospace;font-size:12px;background-color:#E7E5DC;width:99%;overflow:auto;padding-top:1px;margin:18px 0!important} 
.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span{border:none;margin:0;padding:0} 
.dp-highlighter a,.dp-highlighter a:hover{background:none;border:none;margin:0;padding:0} 
.dp-highlighter .bar{padding-left:45px} 
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left:0} 
.dp-highlighter ol{list-style:decimal;background-color:#fff;color:#5C5C5C;margin:0 0 1px 45px !important;padding:0} 
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style:none!important;margin-left:0!important} 
.dp-highlighter ol li,.dp-highlighter .columns div{list-style:decimal-leading-zero;list-style-position:outside!important;border-left:3px solid #6CE26C;background-color:#F8F8F8;color:#5C5C5C;line-height:14px;margin:0!important;padding:0 3px 0 10px !important} 
.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:#000;background-color:inherit} 
.dp-highlighter.collapsed ol{margin:0} 
.dp-highlighter.collapsed ol li{display:none} 
.dp-highlighter.printing{border:none} 
.dp-highlighter.printing .tools{display:none!important} 
.dp-highlighter.printing li{display:list-item!important} 
.dp-highlighter .tools{font:9px Verdana, Geneva, Arial, Helvetica, sans-serif;color:silver;background-color:#f8f8f8;border-left:3px solid #6CE26C;padding:3px 8px 10px 10px} 
.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} 
.dp-about{background-color:#fff;color:#333;margin:0;padding:0} 
.dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma, Verdana, Arial, sans-serif!important} 
.dp-about td{vertical-align:top;padding:10px} 
.dp-about .copy{border-bottom:1px solid #ACA899;height:95%} 
.dp-about .title{color:red;background-color:inherit;font-weight:700} 
.dp-about .para{margin:0 0 4px} 
.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} 
.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:700;background-color:inherit} 
.dp-highlighter .preprocessor{color:gray;background-color:inherit}lor:inherit} 
<!--SYNTAX HIGHLIGHTER ENDS-->

Langkah selanjutnya cari kode </Head>, untuk mencari kode ini lakukan proses yang sama seperti  mencari kode ]]></b:skin>, pastekan kode dibawah ini tepat di atas kode </Head>. 

<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>

Masih pada menu edit HTML cari kode </body>, copy dan pastekan kode dibawah ini tepat diatas kode </body>.

<!--SYNTAX HIGHLIGHTER BEGINS--> 
<script language='javascript'> 
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script> 
<!--SYNTAX HIGHLIGHTER ENDS-->

sampai disini proses selesai, simpan template terlebih dahulu. Untuk menerapkan pemasangan SSyntax Highlighter di postingan blogspot, caranya pada menu postingan, klik HTML sebelah menu compose. Setelah itu pastekan kode dibawah ini.

<pre name=”code” class=”JScript”>
Tulis disini kode ‘JScript’ disini
</pre>

kode diatas berlaku jika kode yang ingin Anda masukkan berupa kode JScript. Untuk kode khusus CSS gunakan kode dibawah ini.

<pre name=”code” class=”Css”>
Tulis disini kode ‘Css’ disini
</pre>

Setelah kode dimasukkan, langkah berikutnya klik menu compose, ganti tulisan Pastekan kode ‘JScript’ disini atau Pastekan kode ‘CSS’ disini dengan kode CSS atau Jscript yang ingin dimasukkan dalam postingan. Selesai lihat atau preview terlebih dahulu jika sudah sesuai publish atau terbitkan postingan Anda.

Share this post