Membuat dan Mengganti Thema Syntax Highlighter Blog

Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan berbagai macam jenis thema pada area tertentu dalam halaman blog yang biasanya digunakan untuk menyorot sebuah kode seperti HTML,CSS,artikel dll.Selain membuat blog cantik dan memperlihatkan kapasitas profesionalisme seorang blogger,Syntax Highlighter juga dapat memudahkan seseorang untuk mengambil/menggunakan (copas) kode atau post artikel yang ada pada page blog anda karena Syntax Highlighter ini dilengkapi dengan fungsi View Source,Copy to Clipboard dan Print.

8(Delapan) macam thema Syntax Highlighter yang bisa diterapkan dalam blog anda antara lain:

1.Theme Default, kodenya ( shThemeDefault )

2.Theme RDark, kodenya ( shThemeRDark )

3.Theme Midnight, kodenya ( shThemeMidnight )

4.Theme MDUltra, kodenya ( shThemeMDUltra )

5.Theme FadeToGrey, kodenya ( shThemeFadeToGrey )

6.Theme Emacs, kodenya ( shThemeEmacs )

7.Theme Eclipse, kodenya ( shThemeEclipse )

8.Theme Django, kodenya ( shThemeDjango )

Tutorial untuk menginstall/memasang Syntax Highlighter disini akan saya jabarkan dari mulai membuat Syntax Highlighter sederhana sampai dengan Syntax Highlighter berbeda thema disetiap halaman.

Membuat Syntax Highlighter Versi Simple/Sederhana

Syntax Highlighter Versi Simple adalah Syntax Highlighter yang hanya mempunyai satu thema dalam sebuah blog meskipun themanya bisa diganti akan tetapi hasil themanya akan selalu sama disetiap halaman blog.Misalnya anda menerapkan Syntax Highlighter dengan thema Django hasilnya nanti disetiap halaman akan sama yaitu Syntax Highlighter thema Django.Langkah-langkah Membuat Syntax Highlighter Versi Simple/Sederhana dibawah ini:

Langkah 1. dari dasboard anda, pergi ke Template / edit HTML
Langkah 2. Klik dimanapun dalam kode area dan mencari ( Ctrl+F ) untuk potongan kode ini :
</head>
....sisipkan tepat diatasnya :

<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>

Ket:

-Untuk mengganti thema anda hanya perlu mencari kode shThemeDefault pada baris nomor 02 di atas dan menggantinya dengan salah satu dari 8(delapan) macam kode thema Syntax Highlighter di atas.

-Untuk merubah ukuran font anda hanya perlu merubah angka 76% yang terletak pada baris ke 19 kode Syntax Highlighter di atas.

Langkah 3. sekarang cari Tag ini ( Ctrl+F )
</body>
....dan tambahkan script berikut diatasnya :

<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>

.......simpan template

Langkah 4. pergi ke Layout - klik tambah Gadget

Langkah 5. pilih Widget HTML / Javascript dan paste kode ini di dalam kotak kosong :

<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>

Langkah 6. simpan dan publikasikan untuk melihat tampilan Syntax Highlighter pada postingan anda

Categories