Syntax highlighting code excerpts in our blog posts are visually pleasing. I prefer a nicely highlighted piece of code because it’s allot easier to read and comprehend rather than plain and simple lines of code.

It’s not just a coincidence that our development environments do syntax highlighting as standard, and it’s not just a coincidence that high level development tools like Visual Studio do “auto formatting” of our code, by making indentations, moving begin and end markers, etc.

In this idea when reading code examples from blogs and development articles, this should be available in almost the same way.

To make blogging easier I’m using Windows Live Writer, I know there are lots of similar tools out there, but this is very nicely plugin-able and it’s got all the features I need. When it comes to syntax highlighting there are several plugins out there for Windows Live Writer, but not many cut the mustard for me because most of them directly parse the inserted code and allready render the span tags with the style attributes. Sounds good at first sight, but first of all out of 2-3 lines of code you’ll need to render at least 3 or 4 times more because each and every style attribute will be rendered for every keyword, string, plain text, etc. But let this not be such a big problem. The biggest problem is the maintainability. You can’t simply edit code that was preformatted, which has been processed and has been saved as html markup.

What you really need is what should be a rule for all of us: DRY, don’t repeat yourself.
1) Use css classes to control styling
2) Come up with a way to make your code excerpt maintainable, editable

The best solution I’ve found until now is: SyntaxHighlighter, a javascript library which can highlight several programming languages (probably most you’ll ever need, and if it doesn’t exist custom brushes can be easily created). Why it’s good? Well, you benefit from the fact that all highlighted text color is coming from css (which can be changed easily) and most importantly your code block sits in a <pre> tag (preformatted text), which can be changed anytime you wish. The actual highlighting is happening in the browser. This saves allot of bandwidth and if any changes occur in your style, these are reflected all over the website, you don’t need to revisit all posts to update your code examples.

Lately the library has been updated, and has many options for displaying your code. And because Windows Live Writer 2009is available now I went ahead and created a new plugin for it.

What it actually looks like?

        private string BuildCodeBlock()
        {
            StringBuilder builder = new StringBuilder();
            builder.Append("<pre class=\"[[[code]]]\">");
            builder.Append(HttpUtility.HtmlEncode(txtCode.Text));
            builder.Append("</pre>");
            return builder.ToString().Replace("\"[[[code]]]\”", getClassOptions());
        }

Another example:

        private String buildHighlightLinesText()
        {
            List<int> lines = parseHighlightText(txtHighlight.Text.Trim());
            StringBuilder sb = new StringBuilder();

            if (lines.Count == 1)
                return lines[0].ToString();
            else if (lines.Count > 1)
            {
                foreach (int item in lines)
                {
                    sb.Append(item.ToString() + ", ");
                }
                sb.Insert(0, "[");
                sb.Append("***");
                return sb.ToString().Replace(", ***", "]");
            }
            return string.Empty;
        }

After downloading the dll you can copy it to your Windows Live Plugins folder. Windows Live Writer will automatically pick it up, and it will display a button which launches the window above.

I really hope you like it and if there is any assistance you need don’t hesitate to contact me.

SyntaxHighlighterPlugin.zip (10.32 kb)