jump to navigation

Pasting Code into Blog Entries using Windows Live Writer April 1, 2007

Posted by Karl Hulme in .Net, C#, Windows Live Writer.
3 comments

This blog is no longer actively maintained. The content is well over 5 years old – which is like 50 coder years. Use at your own risk!

I’ve tried a couple of different ways of getting code from Visual Studio onto a blog post using Windows Live Writer.  Unfortunately something has nearly always been lost on route.  I’m trying out a new method which seems to be working ok on my local machine, but the only way to test it properly is to upload something -so here goes!

First download the CopySourceAsHTML plugin for Visual Studio.  It’s written by Colin Coller, who I gather now works for Avanade.  This plugin adds a ‘Copy as HTML’ command.  Simply right-click on some selected text, hit the command, and it will convert the code to an HTML representation and place it on the clipboard.  It uses the colors as defined in Visual Studio which is much more useful than anything else I’ve seen before.

You can configure the css produced by the plugin at the file, line and block level. However for this to work properly you may need the CSS Upgrade from wordpress, otherwise it seems to strip out some of the styling on upload.  This $15 for the year.  Since WordPress has a maximum column width of 450px, I’ve specified this as a file level css rule.  So my code should sit in a scrollable DIV element.  I’ve limited the height too so that long scripts don’t disappear off the page.  I’ve also set the padding on the lines to be zero, because otherwise it spaces out the lines of code massively, this is probably specific my current theme. The finished settings that work for me are below.

Once the HTML is on the clipboard you can then flick to the HTML view in Windows Live Writer, paste, and then flick back to normal view.  This requires 6 mouse clicks in WLW, but you can get it down to 1 if (like me) you want it to be really quick.  To do this, create a trivial WLW Addin that inserts the clipboard contents directly into the HTML of the post.  You can get a built version of the plugin from here, but it’s just as quick to compile it yourself.  The source code is below.

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Forms;
using WindowsLive.Writer.Api;
 
namespace InsertHtmlPlugin
{
    [WriterPlugin("58409179-ECA9-4BE4-8F4A-45F2D0DD79A6", "Insert Clipboard Contents as HTML", 
            HasEditableOptions = false, ImagePath = "SmallHtml.png",
            PublisherUrl = "https://karlhulme.wordpress.com",
            Description = "Plugin for quickly insterting HTML from the clipboard.")]
    [InsertableContentSource("Insert Clipboard as HTML", SidebarText="Clipboard as HTML")]
    [CLSCompliant(false)]
    public class InsertHtmlPlugin : ContentSource
    {
        public override DialogResult CreateContent(IWin32Window dialogOwner, ref string newContent)
        {
            newContent = Clipboard.GetText();
            return DialogResult.OK;
        }
    }
}

The code should look reasonable on RSS feeds too.

Hopefully WordPress will get the missing pictures problem sorted very soon.  The lack of pictures makes everything look very bland.