.NET Software Development

Sunday, February 8, 2009

Moved to SyntaxHighlighter 2.0

When blogging (ok, not often in the past, but I'll be more busy in future) about software development I want to post code samples in an appealing way.
There are several ways to do this:
  • Embedding screen shots:
    I don't like this way because it is too much work and too much data to transfer over the wire.

  • When using blogging tools like Windows Live Write there are plugins for code syntax highlighting available:
    Most of them embed the code snippets with a lot of inline styles.
    Ok, better that screen shots, but I want to be able to post without being dependent on tools like WLW.

  • Client side post formatting with javascript based code:
    I have seen this often and it was most of the time syntaxhighlighter from Alex Gorbatchev.
    Yes, that's the way I want to post my samples!
Ok, after reading some details it looks easy, but...
I use blogger for blogging and that makes it a bit harder to use the syntaxhighlighter, because you cannot upload any script or style files. Fortunately I wasn't the first one having this problem, so google was my friend (as always)! One hour later it worked.

The next weekend I planned to blog about my experience, but...
Alex Gorbatchev was busy and released version 2 of syntaxhighlighter (now at a new place)!
Before starting to blog a lot of samples using the older version I move my blogs configuration to the new release. This has some advantages: Support for blogger, file hosting and more improvements.

To empower my blog for syntaxhighlighter 2.0 only a few steps were required:

1. removing my changes for syntaxhighlighter 1.5

2. referencing the new script and style files at the end of the head tag:
<link href="http://alexgorbatchev.com/pub/sh/2.0.287/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/2.0.287/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushXml.js" type="text/javascript"></script>
3. Setting the configuration and apply the formatting
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.287/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
That's all!
So, now I'm prepared to post more ;-)
Powered By Blogger