Cara Memasang dan Merubah Tema Syntax Highlighter di Blogger

Pa kabar Sob... kali kita akan membahas bagaimana Cara Memasang dan Merubah Tema Syntax Highlighter di Blogger. Mungkin sudah banyak Sobat blogger yang membuat tutorial tentang Cara Memasang Syntax Highlighter di Blogger, tetapi di sini saya akan memberikan sesuatu yang beda, karena Syntax Highlighter yang akan kita pasang nantinya dapat diubah themanya.

Sebelumnya ada baiknya kita mengetahui apa sebenarnya itu Syntax Highlighter ini. Syntax Highlighter adalah sebuah perintah untuk memberikan perbedaan atau sorotan atas teks berdasarkan jenis teks yang dimaksud, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi.

Syntax Highlighter ini sangat berguna bagi Sobat blogger yang sering membagikan kode atau script untuk pengembangan web atau blog. Biasanya kode atau script tersebut diletakkan dalam blockquote kemudian memberikan warna tertentu untuk memberikan tanda pada kode atau script yang dianggap penting. Dengan Syntax Highlighter ini semua itu dapat dilakukan dengan lebih mudah. Tidak hanya tampilan teks terlihat lebih nyentrik, tetapi akan lebih memudahkan pengunjung blog untuk mempelajari kode atau script yang kita bagikan, karena ada perbedaan warna pada setiap elemen yang berbeda.

Cara Memasang Syntax Highlighter di Blogger

Letakkan kode berikut di atas </head>

<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

Kemudian letakkan kode berikut di atas kode </body>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Terakhir simpan template

Cara Menggunakan Syntax Highlighter di Blogger

Cara menggunakan Syntax Highlighter dalam postingan adalah dengan menambahkan kode berikut, tetapi sebelumnya ubah dulu mode penulisan dari Compose menjadi HTML pada proses penulisan artikelnya.

<pre class="brush: xml;highlight: [2,4];">
Tempatkan kode atau teks di sini
</pre>

Jangan lupa sebelum menyisipkan kode, parse lebih dulu kode tersebut menggunakan Parse HTML. Jika tidak di parse terlebih dahulu, teks yang ditampilkan akan diterjemahkan sebagai perintah, bukan menjadi teks biasa. Sobat bisa menggunakan Parse HTML di sini, gratis Sob.

Cara Merubah Tema Syntax Highlighter di Blogger

Untuk merubah thema Syntax Highlighter, silahkan ganti shThemeDefault dengan pilihan teman berikut ini.

• Theme Default, kodenya adalah shThemeDefault
• Theme RDark, kodenya adalah shThemeRDark
• Theme Midnight, kodenya adalah shThemeMidnight
• Theme MDUltra, kodenya adalah shThemeMDUltra
• Theme FadeToGrey, kodenya adalah shThemeFadeToGrey
• Theme Emacs, kodenya adalah shThemeEmacs
• Theme Eclipse, kodenya adalah shThemeEclipse
• Theme Django, kodenya adalah shThemeDjango

Demikian Cara Memasang dan Merubah Tema Syntax Highlighter di Blogger ini, semoga bermanfaat Sob. Thanks udah mampir ya....