I use the PreCode plugin for Windows Live Writer to add the code snippets to my blog posts that are highlighted with SyntaxHighlighter. PreCode adds the HTML markup required for SyntaxHighlighter to identify the snippets that require highlighting. It also ensures that the snippet code is HTML encoded.

The recently released version of PreCode now includes support for the new SyntaxHighlighter v2.0 markup and options. The HTML that SyntaxHighlighter uses to identify code snippets was changed in v2.0 to be more standards compliant and is notably different to the old markup. For this reason, the plugin will not work with older versions of SyntaxHighlighter.

The UI of PreCode has also been given an update and is looking very nice indeed.

Another cool feature Anthony Bouch has added is the ability to run PreCode as a standalone Windows desktop application. Thanks to Anthony for keeping this great plugin alive and kicking.

It’s always a good idea to separate content from behaviour, and this is the reason I don’t like the idea of adding rel attributes to my anchor tags in order to support Lightbox. I may decide one day that I want to use Highslide or another library instead, and I certainly don’t want to massage the HTML of my existing posts or put in hacks to support the new library.

When adding an image to a post using Windows Live Writer the resulting HTML looks similar to that below. An image tag that displays the thumbnail image is nested inside an anchor tag that links to the full size image.

<a href="foo.jpg">
    <img title="Foo" alt="Foo" src="foo_thumb.jpg">
</a> 

If you provide an alternate description for the image in WLW, it is as you would expect, applied only to the image tag. Many of the variations of the Lightbox library get the description to display in the Lightbox from a title attribute on the anchor tag. This is a problem that jQuery and jQuery lightBox can solve for us without our needing to touch the HTML generated by WLW.

jQuery lightBox is a jQuery implementation of Lightbox. It enables you to add the Lightbox effect to any image, or more specifically anchor tag, that you can select with a jQuery selector. The power of jQuery selectors can do the heavy lifting to find the images, so there is no need to add attributes to the HTML content that serve only as identifiers for the Lightbox script.

Download jQuery lightBox and upload it to your BlogEngine.NET website. Add the markup below to the head tag in the site.master file for your theme. Make sure you update the folder names to match your upload location and the file names to match the version you downloaded. You may also need to update the image paths in the jQuery lightBox script (jquery.lightbox-0.5.js). If you already have a reference to the jQuery library you do not need to add the one included with the plugin (jquery.js). I am currently using the plugin with jQuery v1.3.1 without any problems.

<link rel="stylesheet" href="/Extensions/Lightbox/css/jquery.lightbox-0.5.css" type="text/css" media="screen" />

<script src="/js.axd?path=Extensions/Lightbox/js/jquery.js" type="text/javascript"></script>
<script src="/js.axd?path=Extensions/Lightbox/js/jquery.lightbox-0.5.js" type="text/javascript"></script>

<script type="text/javascript" >
    (function($) {
        $(function() {
            $('div.text:has(a):has(img)').each(function() {
                $(this).find('a:has(img)').each(function() {
                    this.title = $(this).children('img').get(0).title;
                }).lightBox();
            });
    })(jQuery.noConflict());
</script> 

The strange anonymous function in the JavaScript code is to prevent a naming conflict between jQuery and BlogEngine.NET, as well as other JavaScript libraries such as Prototype that use $ as a function name.

The script identifies all the div tags with a class of text, that contain anchor tags, that in turn contain image tags. This restricts the Lightbox effect to images in post content and provides a way to create a Lightbox grouping for all images in the same post. Images that are in a group can be viewed inside the same Lightbox using next and previous buttons. The script also copies the title attribute from the nested image tag to the parent anchor tag. This ensures that descriptions you add for the image in WLW are presented in the Lightbox.

With only a little bit of effort we can keep our HTML clean and get the cool Lightbox effect as well. Below are some sample images you can test out to get a feel for the effect. You will notice that each image has a description and that you can navigate through them as a group.

I made a simple Windows Live Writer plugin that allows you to easily surround text with the <code> HTML phrase tag. Writing a plugin for WLW is fairly straightforward and everything you need to know can be found in the Windows Live Writer SDK documentation on MSDN. The default browser rendering of text inside a <code> tag is to display it using a fixed-width font. You can of course alter its appearance using CSS to make it a little more interesting.

If no text is selected in the editor and the plugin is activated, a small dialog is presented into which you can enter the text that is to be placed inside the tag. You can also select text in the editor and have it immediately placed inside the tag when the plugin is activated. Trailing whitespace in the selected text will not be included inside the tag. Any trailing whitespace inside the tag would also be fixed-width, causing the spacing before and after the text inside the tag to appear uneven.

To install the plugin simply drop the AlexMG.CodeTagPlugin.dll file into the C:\Program Files\Windows Live\Writer\Plugins folder. When building from source code the plugin will be copied to the WLW plugin folder during the post-build event.

<code> Tag Plugin (3.67 kb)

<code> Tag Plugin - Source (5.45 kb)