.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 ;-)

5 comments:

Kluyg said...

Thx! I've tried out lots of solutions but only yours is a working one.

Jaco Pretorius said...

Thanks, I've tried quite a few solutions and this one is the first that actually works.

By the way, your link and script tags need to be closed...

Todos Logos said...

Thanks for the tutorial!

Mike said...

Thanks for the tutorial!
I still have some issues however with the use of the syntaxhighlighter. What needs to be changed (i.e. which tag should I use) in the html in order to trigger the syntax highlighting?

Mohamed A.El-kady said...

You are the best :D it works so well. But the code you provided above contains only XML,JS,C# and HTML.
For users, you can add more syntaxes from here: http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html#themeswitch .I think all of you will need CSS and PHP basically.
Good luck :F