[2008.07.07] Copy Visual Studio Code to Blog

It took me a little while to get my blog off the ground because I could not get it to look how I wanted it - namely in terms of code formatting. I looked for a universal solution but soon realized that there was none, at least not for me. So I experimented and yelled at my computer a few times and I will now outline the fruits of my labor.

As far as I can tell, you cannot use custom CSS with your blog posts (Google Blog) at least. I tried to modify the underlying template by adding a set of CSS rules but when I uploaded a post, the rules are never applied. Modifying the template changes the default look of the blog basically. The best way to get your look is to use Inline Styles. It takes a little effort to start, but it is worth it and I will add the items I use here so perhaps it will not be as hard as afterall!

Primarily I use three tools:

• Microsoft LiveWriter (LW)
• Microsoft Expression Web
• CopySourceAsHTML plugin for Visual Studio

I only use LW to verify the look I want and to publish the post. I do all my major editing in MS Web. Obviously, you can use any HTML editor you want but MS Web has built in IntelliSense so crunching out the inline styles are especially quick and easy. In addition, there are a few other plugins for LW that allows you to copy formatted code, but I simply do not like the end result of those plugins. Again, it is up to your tastes and Brig Lamoreaux has a review on some of these.

The star of the show is the CopySourceAsHTML plugin for Visual Studio. There is not VS2008 version of this plugin, however, it will still work. I recommend looking at how to get and install the plugin either from Guy Burstein or Andreas Erben blog posts.

The plugin is great for blocks of code, but if you have language specific keywords scattered all across your post and you want to format them as well then inline styles is here to save the day. That's it, there is no other way I can think of right now. So what I do is make a text file with a few tags that I know I will frequently use and when it is time to do so, all I have to do is copy and paste.

For example, in my blog, I use an outer <div> tag to wrap all the contents of that particular post and it looks like:

<div style="font-family: Tahoma;

    font-size: medium;

     padding: 2px;margin: 2px;

     width: 460px;

     text-align: justify;"> <!-- START outer div-->

<!-- Contents of Post goes here -->

</div><!-- END outer div -->

To get the code look such as System.Collections use:

<span style="color:#000000; font-family:'Courier New', Courier, monospace"></span>

To get the color used for classes in C#, use:

<span style="color:#2C92AF; font-family:'Courier New', Courier, monospace"></span>

For example, to get System.Console do something like:

<span style="color:#000000; font-family:'Courier New', Courier, monospace">System.</span>

<span style="color:#2C92AF; font-family:'Courier New', Courier, monospace">Console</span>

Looking at my previous posts, you can see the effect that CopySourceAsHTML and inline style sheets has on the overall look of the blog. As I said, it is a bit of a pain to use the inline styles, and I doubt everyone will have the patience to do it this way. Hope this helps, feel free to ask any questions if needed.