Add SyntaxHighlighter to the Google Blogspot Gadget

I am a developer and I want to have my code high light on the Google Blogspot. I searched on the web for the solution. There are many references to http://alexgorbatchev.com but non of them provide Step by Step of how to add SyntaxHighlighter to the Google Blogspot gadget.

Step by Step

• Select the Design Tab.

• Select the first "Add a Gadget".
• The Gadget popup appears, Select the HTML/Javascript item by clicking on the + button.

• A dialog box appears. Enter Code Highlighter for the Title.
• For the content, cut and paste the following lines to it. Those links are pointing to the current SyntaxHighligher JavaScript and CSS version available at http://alexgorbatchev.com/pub/sh/ .

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"/> 
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script> 
<script language="javascript"> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>

Use SynxtaxHighligter 
If you want your code to high light, you have to enclose your code inside the <pre> tag as below.

There is a brush option for specifying different type of codes : C#, JavaScript, Java, Xml..etc.

Here is the link to the available brushes http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Note : Use the Html-Encode to encode the < and > if you want to hight lighting a XML or a HTML syntaxes.