Getting Source Code into Your Blog

I have always written my blogs using Microsoft Word.  A quick look around the internet and the vitriolic hatred of Word as a blog writing tool becomes apparent.  But I try not to let popular opinion affect my technology choices, and instead focus on what works for me.

The blogging workflow for Word was easy.  Write the entry, pasting source code straight from visual studio as I went along.  Save as hmtl filtered. Copy the html output into wordpress, and voila, shiny new blog entry.

I don’t know if it was the upgrade to latest version of wordpress, maybe an upgrade to the theme i am using, but my old workflow no longer worked.  The problem involved additional spacing in all the paragraph tags generated by word.  I fiddled, I faddled, but no matter how i massaged the html i just couldn’t get the source code to look right.  So instead of blasting the evil empires worthless text editor on slashdot, i simply started looking for a new workflow that works for me.

I had tried live writer before and had found it a very capable blog editor, however, the ease of copying source code straight from visual studio was no longer an option.  A quick look at what others were doing turned up the wordpress option, the live writer option, and the visual studio option.

The wordpress option uses javascript to format your code when the page is loaded in the browser.  I would call this delayed syntax highlighting, since it waits until the last possible moment to actually format your code.  The downside of this is the highlighting does not follow your visual studio settings, and only supports languages that have javascipt provider written for them.  Since i write a decent amount of f#, which is not supported, this route was a non starter.

I tried the live writer option in my last blog post.  It works reasonably well, but i got continually frustrated with having to resize my code blocks because of a large space between the code block and the next line of text.  And because it uses pre tags there is not direct access to the code from the editor.  The nail in the coffin though was when i checked the feed in ie, firefox, chrome, and google reader, every client rendered the spacing different with google reader adding a huge number of spaces after the code block.

So for this blog entry i’m using the visual studio option.  The only thing that stopped me from using  CopySourceAsHtml last time was it did not support Visual Studio 2010.  Luckily, adding support is rather a trivial with a few hickups along the way.

First we add an xml addin description for Visual Studio 2010. Next we update the installer to build an addin directory for Visual Studio 2010.  Tweak the user interface of the installer and we’ve got a 2010 installer except

AddInError

The command bars api is busted in Beta 1.  Which means you will have to assign shortcut keys to the commands.

CommandKeyboard

And to get rid of the error when visual studio 2010 loads, we simply comment out the code that adds the menu to the command bars. And for all our hard work we can now post the following to our blog form visual studio 2010.

var rect = RectangleFluent.Create()

    .SetColor(Color.AliceBlue)

    .SetHeight(16)

    .SetLength(16);

 

Dim rect = RectangleFluent.Create() _

    .SetColor(Color.AliceBlue) _

    .SetHeight(16) _

    .SetLength(16)

 

let rect = RectangleFluent.Create().SetColor(Color.AliceBlue).SetHeight(16).SetLength(16)

I’ll be interested to see how the code renders in the various clients.  You can download a modified installer here that supports Visual Studio 2010.  Hopefully, the comand bar api will be fixed for beta 2.

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>