Monday 2 February 2009

Posting code snippets on BlogSpot.com

One of the things that surprised me, when I started fiddling around with BlogSpot a couple of months back, is that there is no inherent capability to format source code in a posting.

I came across a few solutions (well, hacks…) and even posted on one solution last month. It was still a pretty yucky solution, though, involving hosting the code snippets at another site and then hacking the HTML to refer to it. It also seemed (although, this could have been my incompetence) to be very easy to screw up the rest of formatting in the posting.

Anyway – I found a better solution! Using Microsoft’s Windows Live Writer, I can compose my postings offline in a much friendlier front end. OK – lots of other tools can do this too, but the two things I love about Live Writer are;

  1. It has in-built support for BlogSpot, so I can display my blog right in the tool and then publish out to BlogSpot with one click
  2. It has support for “plugins”, including a number of source code formatters.

Now, don’t worry too much about the fact that this is a Microsoft tool. It seems perfectly happy with BlogSpot and, other than a requirement for the dotNet Framework 2.0 to be installed, does not seem hugely Microsoft-centric.

Installing Microsoft Windows Live Writer

To get this running, you need to wander over here and download and install the Live Installer. Now, just watch out that this installer gives you the option to install a whole load of apps – I’m not sure what all the others do (and don’t particularly care), but I was only interested in Writer. So I selected that, de-selected the rest and let it carry on.

Installing the Source Code plug-in (and other plug-ins!)

Next stage is to get the plug-in and install it. You can do this a number of ways;

  1. Go get it directly, from here
  2. Browse the Windows Live Writer Gallery here and pick your own Source Code formatter (there are quite a few)
  3. Within Writer, click on the Add a plug-in... tag way over on the right hand side, which actually takes you to the same place as option 2)

When you get to the gallery, you’ll see tons of optional plug-ins including Twitter Notify, Digg This, etc.

A warning if your Windows installation is not on Drive C:!

One point to note is that the Source Code Formatter plug-in expects to find Windows, and more importantly, “Program Files” on C:\. If, like me, your Windows install is on another drive (mine is on D:) then the plug-in files will “accidentally” end up in C:. The solution, is to find them in “C:\Program Files\Windows Live Writer\Plugins” and copy them to “D:\Program Files\Windows Live\Writer” – note also that the program folder in C:\ does not appear to be correct

Using the Source Code Formatter

It’s easy to use. Once you’ve installed it, and restarted Writer, you should see a new entry in the “Insert” menu on the right hand side.

All you need to do is click on that Insert Source Code link, select the options you want and insert the code. See the screen shot below for an example.

image

image

Note that I’ve selected my favourite options, which are “Line Numbers”, “Enable Box”, “Alternating Lines” and “Enable Selection”. The outputed code is shown here;

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using ProjectBase.Core;
  6: using ProjectBase.Core.PersistenceSupport;
  7: 
  8: namespace theCmdb.Core
  9: {
 10:     public class AuditType : PersistentObject
 11:     {
 12:         #region Declarations
 13:         private string _internalName = "";
 14:         private string _name = "";
 15:         private string _description = "";
 16:         private string _formatString = "{0}";
 17:         #endregion
 18: 
 19:         #region Constructors
 20:         protected AuditType()
 21:         {
 22:         }
 23: 
 24:         public AuditType(string name)
 25:         {
 26:             this._name = name;
 27:             this._internalName = name;
 28:         }
 29: 
 30:         public AuditType(string name, string description)
 31:         {
 32:             this._name = name;
 33:             this._internalName = name;
 34:             this._description = description;
 35:         }
 36:         #endregion
 37: 
 38:         #region Properties
 39:         /// <summary>
 40:         /// Name of this Audit type
 41:         /// </summary>
 42:         public virtual string Name
 43:         {
 44:             get
 45:             {
 46:                 return _name;
 47:             }
 48:             set
 49:             {
 50:                 _name = value;
 51:             }
 52:         }
 53: 
 54:         /// <summary>
 55:         /// Internal name of this system type
 56:         /// </summary>
 57:         [DomainSignature]
 58:         public virtual string InternalName
 59:         {
 60:             get
 61:             {
 62:                 return _internalName;
 63:             }
 64:             set
 65:             {
 66:                 _internalName = value;
 67:             }
 68:         }
 69: 
 70: 
 71:         /// <summary>
 72:         /// Audit type description
 73:         /// </summary>
 74:         public virtual string Description
 75:         {
 76:             get
 77:             {
 78:                 return _description;
 79:             }
 80:             set
 81:             {
 82:                 _description = value;
 83:             }
 84:         }
 85: 
 86:         /// <summary>
 87:         /// The format string used to write the audit message
 88:         /// </summary>
 89:         public virtual string FormatString
 90:         {
 91:             get
 92:             {
 93:                 return _formatString;
 94:             }
 95:             set
 96:             {
 97:                 _formatString = value;
 98:             }
 99:         }
100:         #endregion
101: 
102:         #region Overrides
103:         public override string ToString()
104:         {
105:             return InternalName;
106:         }
107:         #endregion
108: 
109:     }
110: }





Posting from Writer



Posting to BlogSpot is very easy (assuming you’ve already logged in to your Blog from within Writer). Just hit the Publish button and you’re almost there. An oddity, is that I would have assumed that “Publish” meant, well, publish. Instead it seems to mean “Publish to draft” so you still need to go to BlogSpot and commit your posting. A small price for a very nice tool. Update; it does publish when it was created entirely within Writer – if you are editing a Post that was originally created within BlogSpot then it’s only a draft…



Credits



That’s about it! Finally, I’d like to direct you to Amer Gerzic’s site – he is the creator of this wonderful plug-in.

3 comments:

  1. You missed out a few things that Live Writer does, that "hacks" as you say - do not!

    How about the EMBEDDED css and an HTML mess you get when you are using live writer?
    Also you cannot EDIT you code snippets once you create them in live writer.

    ReplyDelete
  2. Hi Andriy

    thanks for the comments. The alternatives that I'd looked at before involved making a lot of mess in the CSS and HTML too. My experience (though obviously fairly limited so far) is that Live Writer is a lot cleaner from UI perspective.

    As for editing code snippets - I'm not sure what you mean? I probably wouldn't edit the code snippets directly in Writer, given that they normally originate elsewhere. When I see that I need to update code then I would update it at source, then re-copy and paste it using Amer Gerzic's utility.
    I don't see that as a disadvantage; quite the contrary - I find it very easy to re-copy-and-paste amended code in.

    Cheers
    Scott

    ReplyDelete
  3. Thank You, this is really help full....

    ReplyDelete