Install Syntax Highlighter pada blogger

Syntax highlighter merupakan feature dari blog atau website untuk mempermudah menampilkan text yang beruba code-code dari bahasa pemrograman tertentu seperti HTML, PHP, Java, dll. Kebayang kan syntax code di tulis tanpa highlight, ya mirip-mirip buat code di notepad yang warnanya sama semua terus tanpa tabulasi. Karena itu di buatlah Syntax highlighter supaya mempermudah membuat artikel berupa code di website atau blog.

Inilah contoh bentuk dari syntax higlighter

    echo "I like PHP";

This is a heading
This is a paragraph.

pada postingan kali ini saya akan sharing bagaimana caranya memasang / menginstall Syntax highlighter pada blogger. Sebelum mengedit blogger template backup lah blogger template anda.

1. Buat CSS untuk Syntax Highlighter. Caranya kopi code css ini file di bawah ini sebelum tag </b:skin>

<b:skin><![CDATA[
......
/* copy css syntax highlighter disini
----------------------------------------------- */
]]></b:skin>

2 Paste code javascript di bawah ini sebelum tag </head>

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

3 Paste code dibawah ini sebelum tanda </body>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

4 Save Blogger Template yang sudah di edit.

5 Sekarang Syntax higlighter sudah bisa di gunakan pada blog anda. cara menggunakan nya seperti di bawah ini :

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

Dalam membuat syntax code yang di highlighting di perlukan konversi untuk tag-tag HTML. konversi bisa menggunakan tools pada halaman ini . Sedangkan untuk class apa saya yang di support bisa liat pada halaman ini .

Read more ►