Syntax Highlighter for Windows Live Writer 2009

by Arnold Matusz 19 2 2009

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.

Syntax Highlighter for Windows Live Writer 2009 - Arnold Matusz

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)

DZone it Digg it Submit to StumbleUpon Submit to Technorati Submit to reddit.com Submit to del.icio.us Submit to NewsVine Submit to Furl Submit to BlinkList

Tags: ,

.NET | Programming

Comments

2/20/2009 10:16:16 AM #

trackback

Syntax Highlighter for Windows Live Writer 2009

You've been kicked (a good thing) - Trackback from DotNetKicks.com

DotNetKicks.com |

2/20/2009 10:17:13 AM #

trackback

Syntax Highlighter for Windows Live Writer 2009

You are voted (great) - Trackback from Web Development Community

Web Development Community |

2/20/2009 3:39:22 PM #

trackback

Arnold Matusz's Blog | Syntax Highlighter for Windows Live Writer 2009

Thank you for submitting this cool story - Trackback from DotNetShoutout

DotNetShoutout |

2/23/2009 10:15:05 AM #

Mike Borozdin

Hi!

I was also looking for a good code plug-in and even blogged about that too - www.mikeborozdin.com/.../...ns-for-Developers.aspx

Mike Borozdin Russia |

9/23/2009 3:46:17 AM #

Abel Braaksma

Once you use the SyntaxHighighlighter from Alex Gorbatchev, it might be good to be aware of the available custom brushes. The library comes with some built in brushes, but more and more custom brushes exist.

An overview that I maintain of all available or found brushes can help you locate the right one, see: www.undermyhat.org/.../

Abel Braaksma Netherlands |