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)

  • Karl Shifflett Reply

    Thomas,

    Thank you for an awesome post. I have blogged your post.

    http://karlshifflett.wordpress.com/2008/01/07/killer-blog-code-formatting/

    You are The Man!

    BTW: What are your thoughts on Mole v4?

    Karl

    January 7, 2008 at 12:34 pm
  • hubethom Reply

    Hi Karl,

    tanks for your comment and blog-post.

    I haven’t tried out Mole v4 up to now. I’ve just read the feature set on http://karlshifflett.wordpress.com/mole-for-visual-studio/.

    The features are really great. I’ll install it the next days and give you my feedback.

    Thomas

    January 7, 2008 at 1:36 pm
  • Karl Shifflett Reply

    Thomas,

    Looking forward to the feedback from another WPF Rocker!

    Karl

    January 7, 2008 at 2:08 pm
  • Alex Sarafian Reply

    At last. I was always wandering about.
    Thanks man

    January 13, 2008 at 6:38 pm
  • Cornel Reply

    What about managing comments without accessing the wordpress interface?
    Can this be done with WLWriter?

    Cornel

    January 15, 2008 at 10:56 am
  • hubethom Reply

    Hi Cornel,

    no, managing comments with Live Writer doesn’t work. It’s just a tool to write blogposts. But maybe someone has a plugin for that …

    January 15, 2008 at 7:58 pm
  • Amoxicillin soar throat. Reply

    Amoxicillin alternative….

    Amoxicillin….

    July 21, 2009 at 11:40 pm

Leave a Reply to Cornel Cancel reply

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

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.