Using code syntax highlighter with Windows Liver Writer and BlogEngine.NET

I just got the code syntax highlighter for Windows Liver Writer working together with BlogEngine.NET. I thought I’d throw together a post that lists the steps to get this working!

The ingredients

I use BlogEngine.NET for my blog. Which blog platform you choose is up to you. It must, however, have API-support for Windows Live Writer.

The Syntax Highlighter 2.0 project is a set of CSS and JavaScript files that parse HTML and makes it look all pretty syntax-like. You can use a hosted environment for these files but I recommend uploading them to your own website.

Windows Live Writer – this is probably the best thing since sliced bread. It’s so easy to edit content through this application and upload it to your blog. I love Microsoft, I really do.

Finally there’s the PreCode Snippet plugin for Windows Live Writer which is the plugin that utilizes the Syntax Highlighter 2.0 files. 

Shake’n’bake

Let’s throw these ingredients together!

Install Windows Live Writer and the PreCode Snippet plugin if you haven’t already.

Here’s a post about setting up WLW with BlogEngine.NET (it’s super easy):

Using Windows Live Writer with BlogEngine.NET

Upload the Syntax Highlighter 2.0 files to your website.

Head into settings in the BlogEngine admin UI. Here we’ll reference the JavaScript and CSS files by adding custom code to our header (mine’s in Swedish, but you get the point). The easiest way to do this is to copy/paste the sample code header HTML in the Syntax Highlighter 2.0 zip-file which is called test.html

image

Important: Make sure the path is preceded by “/” else the files won’t be referenced when you head down the website structure. The browser will try to look for the files in <folder>/style/ and <folder>/scripts/!

Install the PreCode snippet plugin for Windows Live Writer and then update your theme. You might have to clear the browser cache before doing this. Just hit the F12 key in Internet Explorer and then Ctrl+R. This will effectively clear your browser cache.

Here’s how it looks when you add code with the PreCode Snippet:

image

Now the JavaScripts and CSS of Syntax Highlighter will take care of the rest when you publish a post onto your blog.  

The result

Downloads

daniel
daniel
Developer
Recent Posts
  • neat fantastic website yea nice work our blog will soon be adding reviews on blogs and add them to our websites as the top best 50 blogs to visit we also do reviews on product recalls all types of reviews thanks

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search