Add SyntaxHighlight to Windows Live Writer in Preview mode 1


Add SyntaxHiglight to Windows Live Writer in Preview mode Windows Live Writer (shorter: WLW) is one of the most popular blog authoring tool that I also happen to like and use. And I say this because of its features – I especially enjoy the Preview tab. But what it really lacks is previewing the ENTIRE page – it will get only the html and some css. So no Syntax Highlighting of my code? Let me tell you how I solved this issue.

As a blog writer I searched for something that could allow me to write the articles offline and then upload them in WordPress. I also tried WordPress built-in editor, but the editing box is so small that I couldn’t use it too much.

The most important feature for me is that it retrieves the blog theme and has a preview function that provide you the same look on editor window. So you will be able to write a post with a preview. But when having a more complex theme, using JQuery or Prototype, you will discover that you don’t get any more the same look and feel as in the blog. This is partially ok for editing, but sometimes it is really bad – especially if you’re a programmer and add a lot of code in your page. On blogs there is a solution to show the code with syntax color, but in the Windows Live Writer I couldn’t find one suitable plug-in that does this.

So it’s time for a simple and nice hack: while registering your blog in main menu entry Blogs – Edit blog settings, it will retrieve the page format for the preview feature. Searching in Windows 7 special directories, I found where it stores the blog template:

For Windows 7 and Vista users: C:\Users\YourUserName\AppData\Roaming\Windows Live Writer\blogtemplates\

For Windows XP users: C:\Documents and Settings/YourUserName/Application data/Windows Live

In this folder you’ll find as many folders as blogs you have registered in WLW – so it’s a matter of luck to find the right one. Basically, you have to navigate inside of each one and you’ll find there 2 HTML files:  index.htm and index[1].htm and some not interesting folders containing associated images and css files.

First I tried to edit the index.htm file, who seems to be used by WLW to decorate the Edit view and inserted the following code right above the </HEAD> tag:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

But surprise! Editing tab was changed, code nice highlighted , but it also modified  the Source tab in the way that now contained also all the HTML generated by Syntax Highlighter. After undo, I was able to see again my page as it was before. So I modified in the same way index[1].htm file, which I found that is responsible for the Preview tab and it worked like a charm. So now I have the same Syntax highlight in WLW as on my blog!

Leave a comment

Your email address will not be published. Required fields are marked *