Pasting code copied from <your editor of choice> into Windows Live Writer
A common need for developers writing blog posts is to show nicely syntax-highlighted code in those posts. These days people use a JavaScript library to render code on the client-side -- and by 'code' I mean languages like HTML, CSS, JSON, XML, as well as the actual languages we write our apps in. After a bit of research I decided on Prism JS to do this.
The scenario I had was to copy some block of code to the clipboard, and then 'paste' it into
the blog post I was writing with Windows Live Writer. The pasting operation would wrap the
copied code in a <div> element to allow for some overall styling, and within that the
normal <pre> and <code> elements required by Prism (and others). A nice little gotcha
is that the <code> tag needs a language attribute that defines what syntax highlighting
is required to render the code.
Compiling the code with Visual Studio will produce a DLL called WLWCodePaster.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 your editor. Switch to Windows Live Writer, go to the Insert tab, and look in the Plug-ins folder. Select Paste Code From Editor. A dialog is shown allowing you to select the type of code you're inserting. Make the choice, press OK, and the code will be inserted into the document, properly surrounded with the required tags.
The code will be wrapped in a special code block like this:
<div class="jmbcodeblock">
<pre><code class="language-foo">
_your formatted code_
</code></pre>
</div>
where "foo" is the language of the code being inserted (JavaScript, HTML, CSS, whatever). That language value is provided by the plug-in based on your selection.
You can then style the .jmbcodeblock selector as you wish. Prism will style the pre and <code> elements, using whatever theme you previously selected. As an example, in my main blog's CSS I add a larger bottom margin than that provided by Prism:
div.jmbcodeblock {
margin-bottom: 30px;
}