Tutorial: Menambahkan Syntax Highlighter Di Blog

Syntax Hightlighter mungkin anda belum pernah mendengarnya atau mungkin anda sudah tahu tentang ini,

bagi yang belum tahu,sintax highlighter adalah fitur dari beberapa editor teks yang menampilkan teks, terutama source code {HTML} dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan kita dalam menulis dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup.

Bagi yang belum paham silahkan lihat kutipan gambar berikut :

Ini terlihat didalam postingan saya disini ,akan tetapi saya tidak menggunakan code seperti ini karena saya tidak mau ribet. hehehe.....!!!
Jika anda ingin mencobanya silahkan simak berikut :

Sekarang anda login ke blogger masing-masing kemudian pilih templete dan pilih Edit Html
setelah itu letakkan code berikut tepat diatas ]]></b:skin>

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

Kemudian cari code </head> dan letakkan code berikut tepat diatasnya

Nah jika sudah selesai langkah diatas,sekarang cari code </body>
kemudian letakkan code berikut tepat diatasnya

Nah sudah selesai setting HTML-nya,sekarang tinggal memberikan code dibawah ini disetiap anda membuat postingan yang berisi code HTML

<textarea name="code" class="c#" cols="60" rows="10">
CODE HTML LETAKKAN DISINI
</textarea>

Contoh :

<![CDATA[

jQuery('a').each(function(){var a=jQuery(this).attr('href');if(typeof a!='undefined'&&a!=""&&(a.indexOf('http://')!=-1||a.indexOf('https://')!=-1)&&a.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel","nofollow")}});

]]>

</script>

</textarea>

Jika kurang paham silahkan tinggalkan komentar anda,InsyaAllah saya siap membantu anda !!!

Tutorial

Search....

Menambahkan Syntax Highlighter Di Blog

No comments:

Post a Comment