Menampilkan kode HTML dengan Syntax Highlighter pada Postingan Blog

Hi... sobat, gimana kabarnya neh, semoga semua dalam keadaan sehat, apa yang menjadi agenda sobat semua berjalan lancar. lama sekali ya tidak ada posting di blog ini. ok sobat, kali ini saya akan bahas soal bagaimana menampilkan source code ke dalam postingan dengan kotak yang menarik dalam hal ini menggunakan Syntax Highlighter.

Sedikit saya jelaskan apa itu Syntax Highlighter, bukan so' tahu seh, ini juga saya hasil dari baca-baca, tapi bukan baca mantra lho..he he he. Ok langsung saja neh, Syntax Highlighter merupakan fitur pada sebuah postingan blog atau website yang terdiri beberapa teks editor yang berfungsi untuk menampilkan text (Source Code). Dengan kombinasi warna dan font, Syntax Highlighter memudahkan programmer untuk menampilkan source code dari berbagai jenis bahasa pemrograman.

Contoh dari penggunaan Syntax Highlighter seperti gambar di bawah ini dimana saya menempatkan source code saya. Bagi sobat yang suka menshare atau berbagi tutorial tentang pemrogramman komputer, baik itu pemrogramman Web, Java, C++, PHP, CSS dan lain-lain hal ini sangat membantu sekali, karena pengunjung blog/ website sobat bisa langsung meng copy-paste source code pemrogrammanya tanpa perlu kita mendrag source code yang disematkan di Syntax Highlighter ini. 

Langsung saja, berikut langkah-langkah memasang Syntax Highlighter di Blog :

1. Masuk ke Dashboard Blogger sobat

2. Pilih Template -> kemudian klik Edit HTML (untuk jaga-jaga saya ingatkan untuk back-up dulu)

3. Cari kode ]]></b:skin>

4. Copy source code di bawah ini kemudian letakkan tepat dibawah kode  ]]></b:skin>

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
SyntaxHighlighter.all(); 
</script>

5. Untuk menampilkannya, letakkan kode berikut pada saat sobat memposting dengan menempatkannya pada tab "HTML" (Ingat! Tab HTML bukan Compose).

<pre class="brush:jfx, brush:javafx, brush:java, brush:php, brush:css, brush:js, brush:html, brush:sql">//tempatkan source code disini </pre>

Gantilah tulisan "//tempatkan source code disini" dengan source code sobat yang akan di posting. Jangan lupa source code nya di parse dulu, klo bingung parse disini aja. Gimana, mudah bukan?! selamat mencoba.   [ 100% tested ]


thanx to: www.okedroid.com