Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain

Image Syntax Highlighter
Pagi ini saya berkunjung ke Maskolis untuk menemukan postingan terbarunya. Dan ada hal yang menarik saya selain isi postingannya yang selalu membuat saya terkagum-kagum pada sosok Maskolis ini. Terdapat beberapa teks area yang menurut saya cukup keren dan penampilannya mirip dengan Dreamweaver. 

Usut punya usut ternyata teks area tersebut lebih dikenal dengan nama Syntax Highlighter yang dapat menampilkan source kode dalam baris dan warna serta dilengkapi dengan tombol untuk melihat plain code dan untuk print. Untuk contohnya bisa Anda lihat pada gambar di atas, atau bisa dilihat pada screenshot di bawah ini.

Syntax Highlighter JavaScript
Syntax Highlighter Untuk JavaScript

Syntax Highlighter kode CSS
Syntax Highlighter Untuk Kode CSS

Karena penasaran saya buka page source-nya Maskolis dan menemukan kode CSS yang sedikit asing dan berbeda pada source code-nya Maskolis yang diawali dengan .dp-highlighter. Selanjutnya saya sedikit pusing untuk kode yang lainnya....hehehe...

Karena saya selalu ingin mengetahui dan belajar hal-hal yang baru, kemudian saya coba untuk mencari artikelnya di Google dan ternyata sudah banyak juga bertebaran. Dan saya menemukan petunjuknya di Blogger Tutorial Blog. Namun saya tetap menggunakan source code dari Maskolis. Bagi yang ingin mencoba Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain ini di blognya dan kebetulan nyasar ke sini..., yuk kita belajar bersama-sama... Untuk para master bila menjumpai kesalahan pada tutorial ini mohon koreksinya....

Silahkan Anda login ke blog Anda >> Template >> Edit HTML >> Centang kotak kecil pada Expand Widget Template. Namun alangkah baiknya sebelum mengedit template blog, sebaiknya lakukan backup dulu untuk berjaga-jaga terjadi kesalahan pengeditan.

Cari kode ]]></b:skin> dan letakkan kode di bawah ini SEBELUM/DI ATAS kode ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).



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

Kemudian cari kode </head> dan letakkan kode di bawah ini SEBELUM/DI ATAS kode </head>



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

Cari kode </body> dan letakkan kode di bawah ini SEBELUM/DI ATAS kode </body>


<script type='text/javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Setelah selesai silahkan save template blog Anda.

Nah untuk memanggilnya pada postingan Anda, silahkan tambahkan kode di bawah ini pada postingan Anda (lakukan pada postingan HTML).

Untuk kode JavaScript gunakan kode di bawah ini:


<pre class="JScript" name="code">
Kode script atau tulisan Anda di sini
</pre>

Untuk kode CSS gunakan kode di bawah ini:


<pre class="Css" name="code">
Kode script atau tulisan Anda di sini
</pre>

Demikian saja tulisan saya tentang Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain ini semoga dapat dimengerti dan bermanfaat.

Update:
Ternyata ada juga tutorialnya dari Maskolis, silahkan kunjungi DI SINI.

Sebelumnya pada halaman ini saya sudah mencoba menggunakan Syntax Highlighter dan berhasil, namun size blog saya jadi bengkak hehehe... jadi saya hapus lagi...Namun bagi yang penasaran ingin mencoba menggunakannya, silahkan gunakan kode-kode di atas... Screenshot di atas diambil dari halaman ini sebelum saya hapus kode-kodenya pada template blog ini.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments