Saat membuat artikel tentang pemrograman, kadang kita perlu menampilkan kode sumber atau yang disebut dengan source code pada halaman blog. Jika kode sumber tersebut kita letakkan secara biasa akan terlihat kurang menarik dan kurang jelas highlight syntax-nya (penekanan tampilan teks pada perintah-perintah program).
Untuk membuat kode program yang kita tampilkan terlihat seperti source code editor kita bisa menggunakan teknik syntax highlighter dari http://alexgorbatchev.com. Contoh tampilannya bisa dilihat pada salah satu artikel tentang import data csv dengan php yang disertai source code disini. Dengan teknik ini tampilan source code terlihat berbeda dari konten blog yang lain dan perintah-perintah pada program terlihat dibedakan warnanya.
Ada dua langkah yang harus dilakukan untuk bisa menampilkan source code pada blogspot. Langkah pertama kita setup dulu sistem syntax highlighternya pada template. Dan langkah yang kedua penerapan kode syntax highlighter pada halaman posting.
Berikut ini langkah setup syntax highlighter pada tamplate Blogspot :
- Pada dasbor Blogger, Masuk ke menu Template kemudian pilih Edit HTML.
- Cari kode </head> dengan cara tekan CTRL+F pada kotak teks editor template lalu ketikan </head> pada teks pencarian. Harap perhatikan, CTRL+F nya bukan pada halaman browsernya lho ya.
- Masukkan link javascript Syntax Highlighter, caranya taruh kode berikut ini diatas kode </head>:
<!--Syntax Highlighter-->
<b:if cond='data:blog.pageType == "item"'>
<script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
<script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
<script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
<script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
<script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>
</b:if> - 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.
- Dengan menerapkan tag <b:if cond='data:blog.pageType == "item"'> berarti kita hanya menggunakan script saat tampil halaman posting saja. Ini meringankan beban loading blog selain halaman pos.>
- Cari kode ]]></b:skin> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik ]]></b:skin>.
- 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; } - Cari kode </body> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik </body>.
- Taruh kode javascript ini tepat diatas kode </body> :
<script language='javascript'>
dp.SyntaxHighlighter.HighlightAll('code');
</script> - Proses setup syntax highlighter selesai sampai disini, selanjutnya siap diterapkan pada halaman posting.
Dan berikut ini cara memasang source code pada halaman postingan blog:
- Pastikan semua proses setup diatas telah dilakukan dengan benar.
- 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> - Taruh source code pada titik-titik diantara tag <pre> dan </pre> seperti contoh berikut ini :
<pre class="php" name="code">
<?php
echo "Selamat Belajar PHP";
?>
</pre> - Silahkan ganti parameter pada tag class sesuai jenis source code yang akan ditampilkan, misalnya untuk menampilkan kode CSS ganti PHP dengan CSS.
- Untuk membuat karakter escape HTML silahkan gunakan beberapa tool yang tersedia di internet seperti pada http://codeformatter.blogspot.com.
