Live Writer Source Code Format Plug-in

I have to confess that I didn't plan to install Live Writer - I was quite happy with blogging from Word (which works really well) - but a couple of people commented on how good it was so I succumbed and tried it out. The instant I saw the "Web Layout" mode I was sold. It gives me a preview of my blog entry with all my styles / templates applied and I can even preview the entry in context in my blog with "Web Preview" mode. Very nice.

Then, talking to Mark Johnston yesterday, he told me he had some plug-ins for Live Writer. That means there must be an SDK.... An idea started to form in my head (doesn't happen very often) that I could use the code formatting tool I mentioned previously and build a plug-in for Live Writer to allow me to paste formatted source code into my blog. A little like this:

 namespace LiveWriterCodeFormatterPlugIn
{
    [WriterPlugin("C05C0F49-1A70-40e0-A81E-3750C1CDF85E", 
        "Code Formatter",
        ImagePath = "Images.Code1.png",
        PublisherUrl = "https://mikeo.co.uk",
        Description = "Helps insert formatted code in your postings")]

    [InsertableContentSource("Formatted Code...")]
    public class PlugIn : ContentSource
    {

Before I go any further, here are some useful Live Writer links:

This excellent blog entry by Keyvan Nayyeri walks you through the process of building a plug-in in a more approachable way than the SDK. Spend a few minutes reading through that and you'll have grasped the essence of what's required to at least build a simple plug-in. My idea was simple - I re-use the code formatting capabilities of Jean-Claude's code (ie - he's already done the hard work me!) - and wrap that within a Live Writer plug-in so I can access it directly from the UI. Right now I have to copy the code from VS, browse to a web page, paste my source in there, click the "format my code" button, copy the resulting HTML and paste it into my blog entry. Not exactly super-slick and not available off-line...

So, the code's pretty straightforward. I derive a new class from ContentSource and override the CreateContent() method. In your CreateContent() method you typically display a dialogue box of some description and provide the content you want inserted by assigning it to the newContent parameter. I have a dialogue that allows you to set the various code formatting options which are used to initialise an instance of the appropriate Manoli.Utils.CSharpFormat.SourceFormat class. This class is responsible for formatting the code in the clipboard. The result is assigned to the newContent parameter and thus gets inserted in the Live Writer editor window. Thus I can now copy the code from VS then in Live Writer click the "Insert Formatted Code..." option in the sidebar and the formatted code is inserted directly in my blog post. I impressed even myself!

 

Let me see the source for this!

If you want to take a look at the source you can download it from:

I just want to get on and use it!

If you just want to get on and use the Live Writer Source Code Format Plug-in:

  • [Pre-requisite - .Net Fx 2.0]
  • Download "Live Writer Code Formatter Plug-In"
  • The zip file contains 2 DLLs. Copy both to your Live Writer Plugins directory (probably something like \Program Files\Windows Live Writer\Plugins)
  • Get the original CSS Stylesheet or you can grab my updated version from the above link (ie same place as the plugin)
  • In your blog engine, either add a reference to the style sheet or add it inline
    • (In Community Server you can add it in the CSS Overrides under "Change how my blog looks" - just paste the CSS in there)
  • Start Live Writer and you'll see a new icon in the sidebar and a new option in the "Insert" menu
  • Ctrl-C some source code (eg from Visual Studio) and then click the "Insert Formatted Code" option
  • You'll be presented with a dialogue to select language and formatting options
    • (I've noticed that "Embed CSS" doesn't work - this seems to be down to Live Writer stripping out the CSS before pasting into the editor)
  • Hit OK and your formatted code will be pasted into your blog entry

 tags: Live Writer, Source Code, Code, Format, Plugin