Cara Menambah Kode Program dengan Syntax Highlighter

Bagaimana nambahin kode program ke dalam blogger? atau how to embed code syntax in Blog?

adalah pertanyaan yang dulu saya tanya ke Google pas mau berbagi kode sumber di blog kita. Memang secara defaultnya dalam Blogger atau Blogspot kita tidak dapat langsung mengetik kode-kode program apalagi kode HTML, soalnya si Blogger bakal ngompile bukan sebagai teks tapi sebagai kode itu sendiri jadi bakal tidak terlihat kode itu di post kita sewaktu di publish.Untuk itu kita butuh sesuatu yang bisa memformat kode-kode tadi biar tidak terjadi salah paham dengan si Blogger dan tampilannya eye-catching punya. Sesuatu itu bernama SyntaxHighlighter suatu alat agar kode kita bisa di tulis dalam postingan. Tidak usah panjang lebar lagi mari kita ikuti langkah-langkah berikut.

Cara Install

Lihat di dashboardnya pilih Template → Edit HTML nah sekarang biar aman CTRL+A terus Copy pindahin dulu semua kodenya ke editor yang kamu punya, jaga-jaga ntar takut terjadi kesalahan hehe.
Nah sekarang masukan kode berikut sebelum tag </head> ambil dari line 02 sampai line 34.FYI: SyntaxHighlighter sekarang sudah versi 3.0.83 namun pada versi terbaru ini tidak ada fasilitas view source, copy to clipboard, print, help.

<!-- Syntax Highlighter 3.0.83 START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter 3.0.83 END -->

Terakhir tinggal di Save deh templatenya.

Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog

Setiap jenis kode yang ingin ditampilkan di dalam halaman sebuah web biasanya menggunakan tag <pre>, meskipun dalam beberapa hal juga bisa menggunakan tag <code>. Untuk post blogger, kita akan menggunakan tag yang pertama. Kemudian masing-masing brush yang dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:

<pre class="brush:css, brush:html, brush:js">
Kode Di Sini
</pre>

Berikut langkah-langkah menambahkan Syntax Highlighter ke dalam Post:

1. Ketika akan memasukkan kode, pindah dari mode "Compose" ke mode "HTML"

2. Kemudian masukkan tag <pre> dan class sesuai yang diinginkan, atau anda bisa copy contoh saya di atas.

3. Sebelum memasukkan kode di antara tag <pre>, anda harus parse dulu kode tersebut. Ini Penting. Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>.

ErwinHauw

Cara Menambah Kode Program dengan Syntax Highlighter

Cara Install