ILearn & ISerialize: Using SyntaxHighlighter 3.0+ on your blog

Thursday, August 5, 2010

Using SyntaxHighlighter 3.0+ on your blog

You can guess from the title that this is a Techie blog and that means I will be posting some code snippets from time to time and so I was looking into some options of code syntax highlighting and I narrowed it down to the awesome SyntaxHighlighter. I use a custom domain name but host my blog on blogger. I also use the awesome Windows Live Writer for posting.

Setting SyntaxHighlighter up was fairly easy but I did find a ton of blog posts on the web about how to do that with varying information. A lot of these posts were so old that they just misdirect you and deprive you from using the all the great features that the latest version offers so I thought I might take a moment to post the best solution that I know so far. Here goes,

Things you should know
SyntaxHighligher is a completely javscript and css based solution to syntax highlighting and it works on the client side and does not require you to embed inline styles and css. Now that is great with one drawback. Since the scripts are hosted (either on your site or somewhere on the web) and are linked on your website pages they will not make it to your RSS feed so most readers will not be able to show the highlighting. Personally, I think it is alright but if you don’t agree stop right here, SyntaxHighligher is not for you.

So How to Set it up then
As I said most of the information on the web is old so those posts tell you to link all the the brush JS on your page but from version 3.0 onwards SyntaxHighlighter has a nifty little feature for auto loading just the required brushes rather than linking all of them. Now if you don’t understand what I am talking about don’t worry, it’s even better since you don’t have to “unlearn” anything :-). Just follow the steps below to set it up for your blogger blog!

Step 1: Add the css and JavaScript links in the <head> section of your blog

<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/shAutoloader.js' type='text/javascript'/>

Now notice that Alex Gorbatchev is actually providing free hosting for the required JavaScripts and CSS so you don’t have to worry about getting a place to host them. Also you will always point to the latest version if you just point to the “Current” directory.

Step 2: Setup Autoloader for brushes by adding the following javascript function again in the <head> section of your blog

<script language='javascript'>

function path()
{
  var args = arguments,
      result = [];
       
  for(var i = 0; i != (args.length-1); i++)
     result.push(
args[i].replace(&#39;@&#39;,&#39;http://alexgorbatchev.com/pub/sh/current/scripts/&#39;));

       
  return result
};
</script>

Now blogger actually changes the single quotes to ' for you or you can post it encoded like above. Either ways it should be fine.

Step 3: Call to action – Use the JS to highlight all the sections on your blog, insert the script below just above </body> tag.

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;
 
SyntaxHighlighter.autoloader.apply(null, path(
  &#39;applescript            @shBrushAppleScript.js&#39;,
  &#39;actionscript3 as3      @shBrushAS3.js&#39;,
  &#39;bash shell             @shBrushBash.js&#39;,
  &#39;coldfusion cf          @shBrushColdFusion.js&#39;,
  &#39;cpp c                  @shBrushCpp.js&#39;,
  &#39;c# c-sharp csharp      @shBrushCSharp.js&#39;,
  &#39;css                    @shBrushCss.js&#39;,
  &#39;delphi pascal          @shBrushDelphi.js&#39;,
  &#39;diff patch pas         @shBrushDiff.js&#39;,
  &#39;erl erlang             @shBrushErlang.js&#39;,
  &#39;groovy                 @shBrushGroovy.js&#39;,
  &#39;java                   @shBrushJava.js&#39;,
  &#39;jfx javafx             @shBrushJavaFX.js&#39;,
  &#39;js jscript javascript  @shBrushJScript.js&#39;,
  &#39;perl pl                @shBrushPerl.js&#39;,
  &#39;php                    @shBrushPhp.js&#39;,
  &#39;text plain             @shBrushPlain.js&#39;,
  &#39;py python              @shBrushPython.js&#39;,
  &#39;ruby rails ror rb      @shBrushRuby.js&#39;,
  &#39;sass scss              @shBrushSass.js&#39;,
  &#39;scala                  @shBrushScala.js&#39;,
  &#39;sql                    @shBrushSql.js&#39;,
  &#39;vb vbnet               @shBrushVb.js&#39;,
  &#39;xml xhtml xslt html    @shBrushXml.js&#39;,
  &#39;xml                    @shBrushXml.js&#39;
));
SyntaxHighlighter.all()
</script>

Notice I am using the new AutoLoader functionality and also since my blog is hosted on Blogger I am setting the bloggerMode to true. If your blog/website is different you should not set this flag and the rest of the setup should be the same for you. Also notice I have added XML brush twice one as a part of the xml xhtml.. group and one as a stand alone item. This was done to work around an issue with the WLW plug-in that I use so if you are not using it then you can remove that. Keeping it the way it is doesn’t hurt too.

Step 4: Add the sections that you want to highlight and set the correct CSS class

<pre class="brush: css; toolbar: false;">

public static void main()

{

Console.WriteLine("Highlight me!");

}

</pre>

And if everything is setup correctly it should look like below,

public static void main()
{
    Console.WriteLine("Highlight me!");
}

A complete list of brushes can be found here. And the complete list of Settings can be found here. But wait, why remember these brushes and settings, why not install the awesome PreCode Snippet plug-in for the Live Writer and let the plug-in handle that for you. Once you install the plug-in you should be able to fire up the plug-in window like below and go crazy..