Cara Membuat Syntax Highlighter atau Blockquote Untuk Blogger

Syntax Highlighter sebenarnya tidak jauh berbeda dengan Blockquote, hanya saja Syntax Highlighter ini tampilannya lebih Elegant dan Professional.

Coretan Gaptek - Cara Membuat Syntax Highlighter atau Blockquote Untuk Blogger

Assalamualaikum ,Sebenarnya agak sulit menentukan judul artikel ini, sebelumnya mau ngasih judul kaya gini "Cara Membuat Syntax Highlighter Pengganti Blockquote Untuk Blogger", tapi kok agak aneh yaa,,, hehee ya sudahlah akhirnya saya pakai judul yang diatas saja.

Oke , Apa itu Syntax Highlighter, dan apa Fungsinya ??
Syntax Highlighter adalah salah satu fitur pada teks editor yang menampilkan atau menyoroti teks, terutama source code yang ditampilkan dalam berbagai warna dan font sesuai dengan kategori masing-masing.
Untuk Blogger sendiri sudah ada fitur seperti Syntax Highlighter ini, yaitu Blockquote. Namun tampilan dari Blockquote masih standar atau biasa saja.
"{timbul pertanyaan dalam pikiran saya...} Kalau sudah ada fitur Blockquote dari Blogger, buat apa kita menggunakan Syntax Highlighter ?..." Nah itu dia, Syntax Highlighter sebenarnya tidak jauh berbeda dengan Blockquote, hanya saja Syntax Highlighter ini tampilannya lebih Elegant dan Professional.

Fungsi Syntax Highlighter :
Dengan menggunakan SyntaxHighlighter ini, maka akan memudahkan pekerjaan kita dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).
Implementasi atau penggunaan nyata dari syntax higlighter pada halaman Website, Blog atau Forum Online sering digunakan sebagai kode prensentasi pada contoh source code seperti : Javascript,HTML,XML,CSS,Python,PHP,JSON,CoffeeScript,Java,SQL,Apache,Haskell,Erlang,Ruby,C++,Objective C, Dan lain sebagainya, karena didunia internet ada banyak bahasa coding yang tidak bisa saya sebutkan semua. hehee

Lantas apa perbedaan dari Syntax Highlighter dengan Blockquote ???... Seperti yang saja jelaskan diatas, perbedaannya terletak pada tampilannya.
Berikut ini adalah Preview dari Syntax Highlighter dan Blockquote agar terlihat jelas dimana perbedaanya.

Preview Menggunakan Syntax Highlighter :

<meta name="viewport" content="width=device-width">
<link rel="profile" href="Google.com" />
<link rel="pingback" href="Google.com" />
<link rel="icon" type="image/x-icon" href="YOUR favicon" />
<script type="text/javascript">
<!--
if (top.location != self.location) {
top.location = self.location.href
}
//-->
</script> <div class="googleplus"><!--Google --><span>Recommend us on Google!</span>
<div class="g-plusone" size="medium"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div>

Preview Menggunakan Blockquote :

<meta name="viewport" content="width=device-width">
<link rel="profile" href="Google.com" />
<link rel="pingback" href="Google.com/" />
<link rel="icon" type="image/x-icon" href="YOUR favicon" />
<script type="text/javascript">

</script> <div class="googleplus"><span>Recommend us on Google!</span>
<div class="g-plusone" size="medium"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div>

Nah bagaimana, cukup menarik bukan. Kalau begitu sekarang saatnya saya bagikan bagaimana caranya memasang Syntax Highlighter untuk mengganti Blockquote di blog kita masing-masing.

Pilih blog yang akan dimodifikasi , kemudian pilih Templates

Copy code dibawah ini, kemudian letakkan didalam tag <body>

<!-- Syntax Highlighter -->
<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'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.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/shLegacy.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/shBrushXml.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/shBrushCss.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/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Kemudian simpan Template

Untuk menggunakan fitur Syntax Highlighter, Sobat hanya perlu menambahkan code seperti berikut :

<pre class="brush: html; ">
Taruh Code hasil parse disini, Bisa code HTML , CSS, atau XML.
</pre>

Dan dibawah ini adalah list Tema dari Syntax Highlighter yang bisa Sobat gunakan :

shThemeDefault.css

shThemeDjango.css

shThemeEmacs.css

shThemeFadeToGrey.css

shThemeMidnight.css

shThemeRDark.css

*Note : Tunggu beberapa detik setelah meng-Klik tema yang diinginkan, waktu ini dibutuhkan untuk memanggil tema yang terkait.
Sebelum menggunakan Syntax Highlighter, Kode harus di Parse terlebih dahulu agar bisa tampil didalam postingan sobat. Untuk mem-Parse Kode HTML sobat, Silahkan menuju link berikut

HTML Encoding Decoding Tool Phrase

Nah bagi teman-teman sekalian yang ingin memperdalam penggunaan dari Syntax Highlighter ini, silahkan mengunjungi Developer langsung dari Syntax Highlighter ini di URL berikut :

SyntaxHighlighter

Selesai sudah Cara Membuat Syntax Highlighter atau Blockquote Untuk Blogger. Jika sobat mengalami kesulitan , silahkan berkomentar dibawah, saya akan senang sekali bila bisa membantu Sahabat semua.