Thursday, January 1, 2009

Formatting Code for Blogger

I’m a stickler for code formatting. It has to be properly indented, properly commented, and in full, purdy colour (and no, that isn’t a spelling mistake, I’m Canadian). I believe that properly formatted code is more legible, easier to understand, and more straightforward to debug.

When I started this blog, I took Jonathan Kehayias' advice and started writing my posts using Windows Live Writer. I speak from a dearth of experience with blog writing software – I started using WLW, and I’m still using WLW, with no plans to change. It meets all of my needs, except one – the code formatting. I’ve been through the WLW Plugin Gallery, and have tried every code formatting plugin made for WLW. They all look great while I’m writing a blog entry, but when I publish my posts to the web, the spacing and colouration, without fail, gets sorely abused. Some of the words appear so faint that I can’t see them at all. I’ve spent as long as 45 minutes re-formatting code after upload (hoping it hasn’t yet been scooped up by the RSS feed readers), just to make it decently presentable.

I thought I’d have another crack at finding a suitable T-SQL code formatter today, and hit paydirt. Here’s the secret recipe:

  1. Format your code properly when you write it in SSMS.
  2. Copy the code to your clipboard.
  3. Navigate to the Simple-Talk Code Prettifier, and paste your code on the “Source Code” tab. Because my code is already preformatted in SSMS, I choose the following options on the left hand pane: Style of HTML = Forums, Keywords = Leave Alone, Language = TSQL, Indenting = Leave Alone, Tab-Length = 4 spaces per tab position.
  4. Click Prettify.
  5. On the Source HTML tab, copy the HTML to your clipboard.
  6. Return to WLW, and click on the “Source” tab.
  7. Paste the HTML from Simple-Talk into the Source tab.
  8. If, like me, you don’t want your code to be double-spaced, change the leading tag in the HTML that you just pasted from <pre style="font-size: 12px;"> to <pre style="font-size: 12px;line-height=1em;">.
  9. Publish and Enjoy!

I still tend to forward-date my article by at least a half an hour, so I can check it out online and make sure that nothing was lost in the transition, before it gets published. I used the above technique on today’s article, and it saved me at least a half an hour of reformatting. I can’t thank the folks at Simple-Talk enough!


Scott Herbert said...

Brilliant, thanks Aaron. Just using that now on my blog.

Maverick said...

Nice post...
Found a eclipse plugin for eclipse IDE users, to directly copy the code as HTML.