Menambah Syntax Highlighting di Blogger

Menurut bahasa saya Syntax Highlighting berfungsi untuk menampilkan source code atau syntax dari bahasa pemrograman tertentu dalam warna dan font yang berbeda, sehingga mempermudah dalam pembacaannya. Untuk menampilkan syntax dalam highlight di blogger maka digunakan sebuah tool dengan bahasa pemrograman javascript yang disebut syntaxhighlighter.
Untuk menambahkan Syntax Highlighting pada blogger maka langkah-langkahnya adalah sebagai berikut.

1. Masuk dalam pengaturan blog anda, kemudian pilih menu "Template" -> "Edit Html" -> "Lanjutkan" 2. copy dan paste kode CSS pada link berikut berikut http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css  sebelum tag  ]]></b:skin>
2. Copy dan paste kode 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. Sebelum tag  </body>   tambahkan kode berikut.

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

4. Untuk menambahkan Syntax Highlighting pada posting, maka gunakan kode di bawah ini dalam mode HTML.
   

   <pre class="php" name="code">
   ..Letakan kode anda di sini..
   </pre>
   

   Jangan lupa untuk mem-parse kode/syntax yang akan anda masukan sebelum menambahkannya dalam posting anda. Anda dapat mem-parse kode anda di sini http://www.blogcrowds.com/resources/parse_html.php

Posted by Kawroo

Tweet