Syntax Highlighting with Live Writer

Showing code is a very fundamental thing for a blogger writing about developing code. I like blogs with syntax highlighted code and there are a lot plugins for windows live writer outside which show code formatted well. But if you ever want to copy some of this code to clipboard for your own usage, you have to strip out html-tags, blank lines and all this format staff. This blog post is about how to do it in a better way.

Google is my friend

With Google I found a solution on codeplex which is build in two parts. One part is the  WLW-Plugin, which enables you to insert your code in a window and choose some options. The other part is a plugin for Blogengine.NET , based on SyntaxHighlighter  from Alex Gorbatchev. I installed the blog engine on my test machine and yeah ! This was cool!  You have a smart display, can copy or print source code without a hassle.

using System;
using System.Collections.Generic;
using System.Text;

namespace CSharp
{
	public class Class1
	{
		public static void Main(string[] args)
		{
		}
	}
}

But.. if I want to use Blogengine.NET together with my dnn web page, I have to skin the blog engine template like my dnn skin, have to synchronize the menus and deal with double logins. Not the best solution at all. So I started Google again and found a blog about how to use the FCK-Editor together with SyntaxHighlighter from Alex Gorbatchev. With this information and the knowledge that the DNN-Blog-Module is able to communicate with live writer I have everything I need!

How to install

First download the following :

• Syntax Highlighter V 2.1.382
• Windows Live Writer Source Code plugin for SyntaxHighlighter

Install Highlighter Files in DNN installation

1. Create directory /styles/sh in  DNN installation
2. Unzip Syntax Highlighter archive to harddisk
3. Copy all files from styles-subdir to /styles/sh
4. Create subdirectory sh in existing directory /js
5. Copy all files from scripts-subdir to /js/sh

Inserting references to highlighter scripts and css-files in page

This can be done in different ways. We can “inject” some code in the page if we use Page settings – Advanced settings – Page Header Tags. But this field is limited to 500 chars (DNN 5.5.1) and normally that is not enough for what we need to do. We need to insert in the page header the following :

<link href="/styles/sh/shCore.css" rel="stylesheet" type="text/css">
<link href="/styles/sh/shThemeDefault.css" rel="stylesheet" type="text/css">

Altogether this is 546 bytes long, 46 bytes to long for the header field. So you can leave out one brush file or use an injector module like WillStrohl.Injection Module . Because I needed all brushes and don't want to install another module, I took another approach:

Modifying Skin Files

We can add the CSS-Files to the skin by using the [STYLE]-SkinObject. Open your skin .ascx with your favorite editor  and add the following @Register directive (if not present)

<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>

Then add the following to the bottom of the page:

<dnn:styles useskinpath="false" stylesheet="/styles/sh/shCore.css" name="ShCoreStyle" id="ShCoreStyle" runat="server"/>
<dnn:styles useskinpath="false" stylesheet="/styles/sh/shThemeDefault.css" name="ShThemeStyle" id="ShThemeStyle" runat="server"/>

Now you can leave out the first 2 lines of the page injection code and that's enough for me !  If you need more Brushes (Erlang, Ruby,Perl and so on…) you have to go the way with an injector module.

Modify blog module

Now open the module settings of your blog module, navigate to “advanced settings” and insert the following into the Header-Field:

Install WLW-Plugin

Last thing to do is installing the wlw-plugin. Unzip the codeplex zipfile and locate WindowsLiveWriter.SourceCode.dll

Copy WindowsLiveWriter.SourceCode.dll into your Windows Live Writer plugin folder:
    * 32-bit systems: C:\Program Files\Windows Live\Writer\Plugins
    * 64-bit systems: C:\Program Files (x86)\Windows Live\Writer\Plugins