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.
1.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:
1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </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>
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.
2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>
<script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
3.Kemudian Save/Simpan Template.
4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.
<pre class="brush: xml;highlight: [2,4];"> Taruh kode/artikel anda disini </pre>
5.Langkah terakhir simpan dan Publikasikan untuk melihat tampilan Syntax Highlighter pada postingan anda.
2.Membuat Syntax Highlighter Versi Mutasi/Perubahan
Syntax Highlighter Versi Mutasi adalah Syntax Highlighter yang mempunyai kemampuan untuk menerapkan thema yang berbeda disetiap halaman blog apabila anda menghendakinya.Langkah-langkah Membuat Syntax Highlighter Versi Mutasi/Perubahan dibawah ini:
1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </head>
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.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>
2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>
<script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
3.Kemudian Save/Simpan Template.
4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.
<pre class="brush: xml;highlight: [2,4];"> Taruh kode/artikel anda disini </pre>Ket:
-Bila anda ingin menaruh kode agar di tampilkan dalam postingan juga sebagai kode seperti yang saya lakukan terhadap anda untuk berbagi kode dan bukan sebagai widget anda harus memparse kode terlebih dahulu,klik disini untuk Parse HTML online.
5.Selanjutnya masukkan kode thema syntax highlighter dibawah ini kedalam postingan anda,dan anda bisa menaruhnya dibagian paling bawah atau tepat di atas kode pada langkah ke-empat.
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Ket:
-Untuk mengganti thema anda hanya perlu mengganti kode shThemeDefault dengan salah satu dari Delapan kode thema syntax highlighter.
Sebagai tambahan bila anda tidak mau menampilkan View source,Copy to clipboard and print,anda bisa menggunakan kode syntax highlighter dibawah ini.
<pre class="brush: xml; toolbar: false;"> Taruh kode/artikel anda disini </pre>Hasilnya nanti akan seperti syntax highlighter dibawah ini
Syntax Highlighter ini tidak menampilkan View source,Copy to clipboard and print
65
