Adding SyntaxtHighlighter javascript with Blogger

Ever heard of "Syntax Highlighter"? This is the javascript framework that converts all the plain text code in my blog (and many other blogs, like Scott Hanselman's) into a neat and highlighted code segments with line number etc - almost like looking at it in an IDE.

You can review, download, and get the main instructions here.

This post is about how to use it with Blogger, Google's blogging engine. Which includes steps in modifying the blogger template of your choosing.

1. After logging in to you blogger account, go to "Layout" and "Edit HTML" tab. You should see a screen like this:


2. Copy the url of the hosted files from http://alexgorbatchev.com/pub/sh/current/ for both styles and scripts for ones you want to use and link them as CSS and javascript include in your template, right below the "HEAD" tag. Like this (or you can copy these lines below if you want):

   
   <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
   

   
   


3. Then scroll all the way down to the bottom of your template, until you see the comment marking for "end-outer-wrapper" and before the closing "body" tag. Here you will need to initialize the Syntax Highlighter by executing several javascript lines. If this is the first time you've used Syntax Highlighter, you probably won't need the last line ("dp.SyntaxHighlighter ..."), since it is really code to enforce backward compatibility with previous version of Syntax Highlighter marking.
   

   
   <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script> 

So now, how do you use it? It's pretty easy. Read here for for the usage/user's guide. In essence, you will just need to surround your "code" with a "pre" tag and depending on what coding language your code is, you will need to assign certain values to the "pre" tag's attribute. Here are some examples:

// for HTML/XML
<pre class="brush:html">
    <UL id=sortable>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</pre>

// for javascript
<pre class="brush:js">
 alert("Hello world");
</pre>

// for C#
<pre class="brush:c#">void dfShipper_DeletingItem(object sender, System.ComponentModel.CancelEventArgs e)
{
    northwindDSContext.DeleteObject(dfShipper.CurrentItem);
    northwindDSContext.BeginSaveChanges((asyncResult) =>
    { northwindDSContext.EndSaveChanges(asyncResult); }, null);
}
</pre>