[Blogger]Memasang Syntax Highlighter

<?php
$myimage = imagecreate(600,500);

$white = imagecolorallocate($myimage,255,255,255);
$black = imagecolorallocate($myimage,0,0,0);
$green = imagecolorallocate($myimage,0,255,0);
$red = imagecolorallocate($myimage,255,0,0);
$blue = imagecolorallocate($myimage,0,0,255);
$ltgreen = imagecolorallocate($myimage,150,255,150);
$ltred = imagecolorallocate($myimage,255,150,150);
$ltblue = imagecolorallocate($myimage,150,150,255);

imageline($myimage,10,10,10,390,$black);
imageline($myimage,10,390,590,390,$black);
imagefilledrectangle($myimage,20,50,100,389,$green);
imagefilledrectangle($myimage,110,90,190,389,$red);
imagefilledrectangle($myimage,200,70,280,389,$blue);
imagefilledrectangle($myimage,290,250,370,389,$ltgreen);
imagefilledrectangle($myimage,380,300,460,389,$ltred);
imagefilledrectangle($myimage,470,85,550,389,$ltblue);

header("Content-type: image/png");
imagePng($myimage);

imageDestroy($myimage);
?>

Diatas merupakan contoh Syntax Highlighter. Syntax Highlighter digunakan untuk memaparkan source code bagi sesuatu bahasa programming. Dengan menggunakan syntax highlighter ini, pengguna lain dapat memahami sesuatu kod sumber dengan mudah selain dapat mengetahui jenis pengaturcaraan yang digunakan.

Bagi menggunakan plug-in ini, ia memerlukan penambahan code css pada template anda.

1. Login ke dashboard anda.
2. Pergi ke Layout -> Edit HTML.
3. Pastikan anda mendownload dahulu template sebelum in sebagai backup
4. Pergi ke http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css dan Ctrl+A dan Copy
5. Paste code css tersebut sebelum code ]]></b:skin>
6. Sebelum code </head>, paste code berikut

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

7. Seterusnya, paste code berikut sebelum </body>

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

8. Setelah selesai, Save Template anda.

Setelah itu, apabila anda ingin mnggunakan Syntax Highlighter ini, anda hanya perlu menggunakan tag berikut pada Edit HTML semasa menulis post anda.

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

class="cpp" tersebut boleh diubah ngeikut jenis pengaturcaraan ynag digunakan seperti (Choices: 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)(Senarai Penuh).