Cara Membuat Syntax Highlight

Syntax Highlight adalah membuat highlight pada sintaks html, php atau bahasa pemrograman apapun sehingga berbeda dengan tulisan lain di sekitarnya, ini berguna ketika sobat blogger ingin membuat suatu tutorial dengan menampilkan kode dengan tempilan berbeda. contohnya sobat dapat lihat pada gambar ini.






Langkah awal seperti biasa.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode </head> ,Jika sudah ketemu, letakkan Kode dibawah ini tepat diatas kode tersebut:

<!-- Add-in CSS for syntax highlighting -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- Add-in Script for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- End code syntax highlighting -->

5. Jika sudah, Save Template anda.

Dan berikut cara penggunaanya di postingan:

-Untuk Kode CSS:

<pre class="brush: css">

Letakkan Kode CSS Disini

</pre>

-Untuk Kode HTML:

<pre class="brush: html">

Letakkan Kode HTML Disini

</pre>

-Untuk Kode Javascript:

<pre class="brush: Java">

Letakkan Kode Javascript Disini

</pre>


Gimana gampang kan? hhe ... sebenernya sih tutorial aslinya lumayan ribet, cuma karena saya gak mau ribet jadi saya pake aja Kode yang ada di hostingannya Alex hhe... Makanya cuma tinggal masukkin Javascriptnya doank wkwkwkwk....

Oiya, klo ada pertanyaan atau ada bugs silahkan anda tanyakan sendiri kepada sang Developer soalnya saya gak ng'rubah kodenya sama sekali hhe.... dan berhubung ini masih Versi 3.0.83, jadi wajar aja klo anda merasa ini masih kurang sempurna, ya biarpun menurut saya ini udah luar biasa keren hhe...

Sekarang terserah anda, mau ikut menggunakannya atau tidak :D

Compatible with:
Please rate this article: