Give your blog-code the "Visual Studio"-look

How do you write a blog-entry with code that has the same syntax-highlightning like Visual Studio has? I mean this look:

<Code>
<Code.Style>
<Style TargetType="{x:Type Code}">
<Setter Property="IsReallyGoodReadable" Value="Yes"/>
</Style>
</Code.Style>
</
Code>

There are many different blug-ins. But only a few get the code exactly look like in Visual Studio. To get your code looking like the code above, you have to do 2 steps (with a small 3rd css-step):

1. Install Live Writer: http://get.live.com/WL/config_all – LiveWriter is a tool for writing blog entries offline

2. Go to the Live Gallery and download the "Paste from Visual Studio add in": Link to the Paste-Plugin

In LiveWriter you can paste the code direct from visual studio by clicking on the link of the plugin. After you’ve written your entry, you upload it, edit it online and finally publish it.

Special things for Firefox:

In Firefox the fontsize of the code is much smaller than in Internet Explorer 7. Fortunately the pasted code is inside a pre-Tag. The pre-Tags’ class-Attribut is set to "code". So you can easily point to the "code" in your css and give the font a fixed size, and it’ll look equal in Firefox and Internet Explorer.

3. The css-Step

I’ve set the fontsize in the css-File of my WordPress theme to 10. The gray background of the code and the dotted border is also specified in my css.

Just past the following in your css to make the code exactly looking like the snippet above and the css-snippet itself:

.code
{
font-family: Courier New;
font-size: 10pt;
background-color: #EEEEEE;
margin: 0px;
padding: 5px;
border: dotted 1px #CCCCCC;
}

Tips: It’s a good practice to enter all linebreaks in Visual Studio before you paste the code into LiveWriter. I normally paste and delete and paste and delete and so on… until it fits. Find more tips on Karl Shifflets blog

Thanks to: Luca Bolognese and Charlie Calvert from Microsoft. They linked me to the plugin. Thanks also to Karl Shifflet who initiated this entry.

I hope this entry helps you to write your post with this format. How do you paste your code today? Do you know other plugins that give your blog-code the Visual Studio-look?

Share this post

Comments (7)

Leave a Reply

Your email address will not be published. Required fields are marked *

*