Format code snippets in blogs

When blogging, I frequently have to copy code and paste it to my post. It is nice if I have the snippet formatted like it is in Visual Studio. In the past, if the snippet is short, I would put it in <pre> tag and manually colorize keywords, comments and strings. If the snippet was long, I would copy it from Visual Studio and paste into Word then copy to my post.

Recently, a friend of mine told me about http://www.manoli.net/csharpformat which can do the job for me. Despite the page's URL, it could format C#, VB, JavaScript, HTML, XML, ASPX, and MSH. The nice thing about code formatted by that page is that it makes use of CSS so I can paste the CSS stuff into my Blogger's template. Imagine some day I want to change the color of the keywords, just update the CSS and it will apply to all snippets in the blog. The page also let me download the source code, so I wrote a winform application myself using that DLL and added support for some other languages, like Java. It works nice, although sometimes it hangs with bad input :). I also changed the CSS a little to make the formatted code look more like that inside Visual Studio. I'll re-format every snippet in my blog.

using System;

namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

The HTML source the tool generates (the HTML source itself is also colorized by the tool):

<pre class="csharpcode">
<span class="kwrd">using</span> System;

<span class="kwrd">namespace</span> HelloWorld
{
    <span class="kwrd">class</span> Program
    {
        <span class="kwrd">static</span> <span class="kwrd">void</span>Main(<span class="kwrd">string</span>[] args)
        {
            Console.WriteLine(<span class="str">"Hello World!"</span>);
        }
    }
}</pre>

Look nice, doesn't it?

There was one problem: in some browsers, the <pre> tag does not wrap. In many pages (like ones in this blog), long lines would go out of the border of its containing panel and there is no way to see the obscured parts. Fortunately, there is a way out: update CSS to make <pre> wrap as described at http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html. After I updated the Blogger template, everything was fine.

.csharpcode, .csharpcode pre {
    font-size: small;
    color: black;
    font-family: Consolas, "Courier New", Courier, Monospace;
    background-color: #f4f4f4;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Sorry the CSS code is not colorized as the tool does not support CSS yet.