Syntax highlighting in this blog

When I post code blocks in this blog. It would be nice if they look like, well, code. So I looked at what Scott Hanselman had done, he is after all one of the creators of the blogengine I use: “Dasblog”

In this post Scott explains how to do it. He explains how to add Javascript from a project called SyntaxHighlighter and use a plugin called precode for Windows Live Writer. Well I use WLW too, so this is perfect for me.

But I had a few problems. I took me some time to figure out that the newest edition of SyntaxHighlighter didn’t work with precode.

So I have now settled on SyntaxHighlighter version 1.5.1 and precode version 3.0.0

SyntaxHighlighter is nice because it has support for multiple languages, and it is easy to add support for more. The caveat is that it hasn’t got any knowledge of the language. Which means that it just parses the text and looks for keywords. So stuff that looks like keywords will be color highlighted too. I consider this a minor problem.

I chose to add the Javascript in the scripts folder of my blog, and the SyntaxHighlighter.css file in template folder.

Know I could easily add the required code in the bottom of my homeTemplate.blogTemplate file, immediately before the closing tag, like so:

<script class="javascript" src="scripts/shCore.js"></script>  
<script class="javascript" src="scripts/shBrushCpp.js"></script>  
<script class="javascript" src="scripts/shBrushCSharp.js"></script>  
<script class="javascript" src="scripts/shBrushJScript.js"></script>  
<script class="javascript" src="scripts/shBrushSql.js"></script>  
<script class="javascript" src="scripts/shBrushXml.js"></script>  
<script class="javascript">  
    dp.SyntaxHighlighter.ClipboardSwf = 'scripts/clipboard.swf';  

Of course if you don’t use DasBlog you just put the code in the bottom of each page.

Furthermore you need to refer to the stylesheet in the top of each page.

The last thing I did was to modify the stylesheet to make the color scheme look a bit more like visual studio.

And now I can post code like this nice c# one-liner that shows the name of every file in the current directory:

using System;  
using System.IO;  
using System.Linq;  
namespace ListNames  
    class Program  
        static void Main(string[] args)  
            (from file in Directory.GetFiles(Directory.GetCurrentDirectory(), "*", SearchOption.AllDirectories)   
             select file).ToList().ForEach(file => Console.WriteLine(file));  

A coworker of mine showed me a program that could do this, and I said well I can do that in one line - it is always nice to show off :) - (disclaimer: I do not generally advocate to code in as few lines as possible. :) One issue you must always consider is readibility, though generally I must say that one of the great advantages of C#3.0/Linq syntax is that it tends to make stuff more readable when used correctly.

Speaking of Linq, as you can see the Syntaxhighlighter doesn’t recognize Linq syntax. The “from” and “select” keywords are not highlighted (unless you read this when I have updated the shBrushCsharp.js script).



Just a quick note to say that I still think my program it nicer than your oneliner :-)

And also, since we are on the subject of plugins for WLW, consider using this one: - it is for inserting a file into your blog post, which I use quite a lot to attach a zip file of my solutions so people can download hem.


Jan Eliasen
Sat, Mar 14, 2009

Hi Jan,

Of course your program was nicer. After all it had a user interface too. :O)

In the old days one-liners was only for showing off, but I think Linq has brought back one-liners as a valid approach because they are often more readable than the 5-10 lines they replace. But to be fair, in your program you showed the size of each file too. If I had brought that into play, it would have made my one-liner less readable.

Thank you for the plugin tip. It will definitely be useful. I am going to need that very soon.

Sun, Mar 15, 2009

Comments closed.