fluxcapacity

As Adam sat down to write the previous post on Linq, his frustration level was rising fast. What was wrong? It turns out the WordPress 2.2.1 visual editor completely mangles colorized source code pasted from Visual Studio. As you flip between “Visual” and “Code” editor modes, your code snippet begins to lose all of its precious formatting.

For example, this:

    class Program {
        static void Main() {
            /* do something */
        }
    }

... ends up very quickly looking like this:

class Program {static void Main() {/* do something */ }}

The real problem here is in the way that the visual editor interprets pasted text. It makes assumptions that would be good for a lot of things -- say, pasting text from an email. The assumptions are pretty bad for source code, unfortunately.

Nevertheless, I wanted to and find some workaround, since we're going to be pasting a lot of code snippets as time goes on. The first thing we noticed from reading posts from frustrated bloggers is that if you avoid the Visual editor altogether, it won't mangle your post's formatting. Some people create special accounts with the Visual editor defaulted off, and use those to post code-related entries. This solution is kind of annoying, since the Visual mode is a nicer interface in general.

Some bloggers have posted hacks to the Wordpress editor into being more friendly. Other people have created some plugins to help with this problem. This post explains part of the needed conversion process to allow special symbols like < and > to appear correctly. My experience was that most of the conversion is dealt with correctly within code tag, and that I just needed to add a little extra finesse. Adam tried the Preserve Code Formatting plugin, Windows Live Writer, and CodeHighlighterPlugin. He had varying success, but none were compatible with the Visual editor, and the code colorizing was dependent on the plugin's language support. So, I came up with a parallel solution:

<code> tags: The Visual editor is less disruptive on text within <code> tags. This makes sense, since the code tag is supposed to allow you to add simple plaintext. Unfortunately, it still removes some line breaks, and also removes some consecutive spaces after you paste code even while in the Code editor. Further, pasting directly into a <code> tag from the visual editor causes similar problems.

The solution: After playing around with several ways to encode code snippets as HTML, and testing them inside of <code> blocks, I found an encoding that seems to survive the wrath of the Visual editor. Here's what I did: Convert all spaces to nonbreaking spaces, i.e. . Next, convert all line breaks to <span> tags with attribute style=display:block; finally, for prettier code, wrap all colorized text in a <span> with the appropriate color specified.

Of course this would be very annoying if you had to do it yourself every time you wanted to paste a code snippet. So I packaged it all up into a C# project, which you can download here. Alternately, you can just get the executable here (Requires .NET Framework 2.0).

The program's pretty self-explanatory. Here's a screenshot:

Update regarding Firefox: Line indentation doesn't work properly when you switch to the Visual mode after pasting the code generated by this tool.  Things stay formatted correctly in when editing within IE7.