Add Syntax Highlight to Blogger
Memasang Syntax Highlight ke blogger sangatlah sederhana, terlebih dahulu kamu harus men-download Syntax Highlighter.
Lalu extract isinya dan upload folder "Scripts" dan "Styles" ke hosting atau website yang dapat menyimpan file tersebut.
Setelah itu, agar semuanya berjalan kamu perlu meng-edit beberapa kode setelah <!-- end outer-wrapper --> :
<link href='http://[YOUR HOST URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>• • • • • Copy code Click Here!
<script language='javascript' src='http://[YOUR HOST URL]/shCore.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Agar semuanya bisa bekerja dengan bahasa yang digunakan kita bisa menambahkan kode lainnya. Misalnya untuk 'bahasa phython', kita perlu menambahkan kode lagi tepat setelah 'baris shCore.js' yang di sebelumnya kamu buat tadi. Dan masukan kode ini :
<script language='javascript' src='http://[YOUR HOST URL]/shBrushPython.js'/>Hasilnya akan seperti di bawah ini :
<link href='http://[YOUR HOST URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>Sudah mengerti?
<script language='javascript' src='http://[YOUR HOST URL]/shCore.js'/>
<script language='javascript' src='http://[YOUR HOST URL]/shBrushPython.js'/>
Untuk mencoba hasilnya, kita buat postingan dengan menyertakan source code, kita bisa mencobanya dengan New Post ► pilih mode Edit HTML. Tambahkan kode ini pada postingan :
<pre name="code" class="python">• • • • • Copy code Click Here!
BLA..Bla...Bla...Example!!! Hohoho Hahaha
</pre>
Hasilnya akan terlihat seperti contoh di bawah ini :
Adanya fitur "VIEW PLAIN" yang sangat berguna seperti Clipboard
OK, tadi semua itu hanya sebagai contoh dengan memakai phython. Sekarang, bila kamu mau menambahkan lain-nya bisa dengan menambahkan kode di bawah ini. Dan kemudian untuk menggunakannya hanya tinggal mengganti class="python" dengan nama kode lainnya yang sesuai. Misalnya <pre name="code" class="CSharp">
(Pilihan: cpp, csharp, css, delphi, java, python, ruby, php, etc)Kamu bebas untuk menghapus kode yang kamu tidak pernah pakai (Contoh: Delphi) -- dan itu akan menghemat 'waktu loading' untuk halaman web itu sendiri.
Berikut ini adalah kode yang komplit :
<!-- Add-in CSS for syntax highlighting -->• • • • • Copy code Click Here!
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
