Windows Live Writer paste code from VS

Pasting code copied from Visual Studio into Windows Live Writer

Introduction

There are a couple of ways to show syntax-highlighted code in your blog posts. The majority of solutions use some special JavaScript library that is loaded along with the page, and this styles your code <pre> blocks in the post client-side. All well and good, but unless you mess around with the CSS you're stuck with the color choices made by the JavaScript library.

At the time I wrote this, I just wanted to mimic the color choices I'd set in Visual Studio. The nice thing about Visual Studio is that if you copy some code to the clipboard, it also adds an RTF (rich text format) version of the code alongside the plain text version. That RTF version contains all the font colors you'd set in Visual Studio, encoded as part of the RTF. This plug-in will look for an RTF encoding of some code in the clipboard and convert it to HTML with <span> elements galore. It also gets wrapped in a class-named <pre> code block so you can set some general CSS for all your code blocks in your posts.

Using with Window Live Writer

Compiling the code with Visual Studio will produce a DLL called WLWInsertCode.dll. Make sure you are not running Windows Live Writer, then copy this DLL to the \Program Files (x86)\Windows Live\Writer\Plugins folder (you'll need admin rights). Restart Window Live Writer.

To paste some code, highlight and copy it from Visual Studio. Switch to Windows Live Writer, go to the Insert tab, and look in the Plug-ins folder. Select Paste Code from VS and the code will be inserted into the document, as formatted in Visual Studio.

Code block format

The code will be wrapped in a special code block like this:

<div class=\"jmbcodeblock\"><pre> your formatted code </pre></div>

You can then style both the .jmbcodeblock and .jmbcodeblock pre selectors as you wish. As an example, in my main blog's CSS I use:

pre, code { 
    font-family: Inconsolata, Consolas, "Courier New", Courier, monospace; 
}

.jmbcodeblock pre {
    font-size: 16px;
    line-height: 1.1;
    color: Black; 
    background: White;
    border: 1px solid #5F5F5F;
    overflow: auto;
    margin-bottom: 20px;
    padding: 10px 20px;
    max-height: 400px;
}