Cara Pasang Syntax Highlighter pada Blog

Cara Pasang Syntax Highlighter pada Blog - Kembali lagi mengulas tentang tips blog yang akan disuguh terhadap sobat gang tutorial setelah dipostingan sebelumnya sudah menyuguhkan Cara Membuat Plug-In Keamanan Blog Wordpress. Hmm kira-kira apa ya tips blog kali ini? bener sekali sob, Cara Pasang Syntax Highlighter pada Blogspot.

Kalau blog wordpress tentunya tidak ada permasalahan, karena tinggal menggunakan plugin Syntax Highlighter. Oya, hampir lupa. Syntax Highlighter seperti halnya tempat yang nantinya akan digunakan untuk menambahkan atau menuliskan kode kedalam postingan blog. Penulisan kode apa saja yang bisa dilakukan dengan Syntax Highligter ? Diantaranya adalah : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. screenshootnya seperti dibawah ini :

Demonya Syntax Highlighter Code

langkah-langkahnya Pasang Syntax Highlighter adalah :

1. Login dan Klik "Layout" > "Edit HTML" dan klik “Expand Widget Templates”.
2. Klik situs http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, kemudian copy semua kode yang ada.
3. Selanjutnya Paste code css tersebut sebelum tag berikut ]]--></b:skin>
4. Silahkan letakkan kode dibawah ini sebelum kode </head>

<!-- Add-in CSS for syntax highlighting -->
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
<SCRIPT src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
</script>

5. Terakhir letakkan kode dibawah ini sebelum kode : </body>

<!– Add-in Script for syntax highlighting –>
<script language=’javascript’>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

6. Silahkan simpan template sobat

7. Untuk menuliskannya Syntax Highlighter kedalam blog, gunakan format seperti dibawah ini :

<pre name="code" class="html">
….ketikkan kode yang anda inginkan disini….!
</pre>

Untuk menuliskan kode tertentu, silahkan ganti tulisan yang html dengan jenis kode yang ingin dituliskan, seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

OK. Sampai disini dulu Cara Pasang Syntax Highlighter pada Blog, semoga bermanfaat dan selamat mencoba