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 :

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



Torsten WeggenMy name is Torsten Weggen and I am CEO of indisoftware GmbH in Hanover, Germany. I'm into DNN since 2008. Before this, I did a lot of desktop stuff mainly coded with Visual Foxpro (see http://www.auktionsbuddy.de). 

I'm programmer, husband, father + born in 1965.

Please feel free to contact me if you have questions.

Latest Posts

DNN module development with Angular 2+ (Part 7)
6/10/2018 1:43 PM | Torsten Weggen
DNN module development with AngularJS (Part 6)
12/16/2016 7:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 5)
12/16/2016 6:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 4)
12/16/2016 5:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 3)
12/16/2016 4:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 2)
12/16/2016 3:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 1)
12/15/2016 7:19 AM | Torsten Weggen
Blogging in DNN with Markdown Monster by Rick Strahl
11/27/2016 1:14 PM | Torsten Weggen
Creating a global token engine
11/18/2016 10:25 AM | Torsten Weggen
DnnImagehandler - Hot or not ?
2/21/2015 11:52 PM | Torsten Weggen

My Twitter

Keine News gefunden!