Posting Source Code to Wordpress.com

I’ve been less than pleased with Wordpress.com’s facilities for posting source code. The built-in shortcode sourcecode isn’t too bad, but it’s hard to control through custom stylesheets. For me, I found the font size too small and hard to read. Also, it doesn’t always highlight the syntax the way I want. So here are a couple of solutions that worked for me.

CopySourceAsHtml – this is a add-in for Visual Studio 2005, 2008, and 2010. It lets you copy code into your clipboard as HTML from Visual Studio. This is nice and easy, but only if your code is coming from Visual Studio.

Windows Live Writer – this isn’t strictly for posting code, but an all-purpose blog editor that works with a lot of different blogging systems (including Wordpress.com). It’s much easier to use than the built-in Wordpress.com editor. You can get it here. It also accepts plug-ins, like the Source Code Formatter.

WLW Plug-in: Source Code Formatter – a plug-in for Windows Live Writer. It let’s you customize the style, such as font, color, box outline, and alternating shading. You can also set select lines to be highlighted. It’s reliable, easy to use, and isn’t dependent purely on Visual Studio.

Both of these solutions generate <pre> tags, but it’s possible that your Wordpress.com theme messes with that tag and thus makes your code unreadable. If that’s the case, you can simply append your CSS style sheet with the following to “reset” your <pre> tag style. The exact style you set it to is not that important, because the source code HTML you paste in should override what it needs to. It just needs to “undo” anything your theme’s CSS might be doing. Note that you will need the CSS Upgrade in order to do this.

pre {
background:#ffffff;
border:none;
font-family:consolas, "Courier New", courier, monospace;
font-size:12px;
margin:0;
padding:0;
}