Syntax Highlighter for Blogger

When I decided to put some source on Blogger, I was always thinking how other people are able to put their source code on their blog with some great highlighter. After I did some research, I found out most people are using a Javascript called "Syntax Hightlighter". The tool is really good and works great with Blogger. I know there are few other people already did post the instruction on other blog but I still want to share what I have done on Blogger and what it looks like if it works.

First, you need to download the zip file from the official site of "Syntax Hightligher" (Click HERE to download it. The version I have is 3.0.83). Extract it and host the files somewhere so that blogger can access it. Before we continue to configure Blogger, it is great to test the Javascript from your host server. The package comes with a great test file called "index.html". If nothing go wrong, you should able to see something like following when you try to access it:

Now, we need to edit the template to include the Javascript. Log into your Blogger and we need to design your template by the HTML Editor. Once you are in HTML Editor, find the line "</header>" and paste the following lines above it:

<link href='http://yourhostserver/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://yourhostserver/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://yourhostserver/scripts/shCore.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://yourhostserver/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

After you finish editing the template, don't forgot get to save the template and try to preview it before you post any new blog. The official website has a lot of documents to help you understand on how to use it and I personally like to use it with "<pre>" tag. In order to use it, you need to edit your blog in HTML and put the "<pre>" tag into your blog.

For example, putting the following code into your blog:

<pre class="brush: c-sharp;"> 
/* Comments*/
// Hello1.cs
public class Hello1
{
   public static void Main()
   {
      System.Console.WriteLine("Hello, World!");
   }
}
</pre> 

it results as:

 
/* Comments*/
// Hello1.cs
public class Hello1
{
   public static void Main()
   {
      System.Console.WriteLine("Hello, World!");
   }
}

There is one more thing I would like to share with others is the "Brush aliases". Here is a list of what I feel like most people will use:

Brush	Brush aliases
ActionScript3	actionscript3
C#	csharp
JavaScript	js
SQL	sql
XML	xml