BlogEngine.Net, SyntaxHighlighter and Windows Live Writer

I’ve been building a little back log of posts for the this blog for the simple fact that I didn’t have a nice code / syntax highlighter for embedding bits of code from C#, Javascript and Html into my posts.  This has now been solved!

Since I use Windows Live Writer to update this blog, I decided to go with the combination solution of the Pre-Code with SyntaxHighlighter javascript bits. 

Pre-Code is extremely easy to install, so I won’t even try and give instructions on this.  You can find installation instructions for the SyntaxHighlighter on their wiki site, but these instructions need to be adjusted a little bit to get optimal results with BlogEngine.Net

I’m not saying that the way I set it up is the best way, it’s simply my way for now.

Step 1 – The Scripts

Copy the SyntaxHighlighter /scripts/ folder into your BlogEngine.Net Web folder.  You can also put the .js files wherever you want, but I stuck with /scripts/ in my own solution.

Step 2 – The Styles

Since BlogEngine.Net has a built in handler for .css files based on it’s own Theme architecture, I figured it would be easiest to just put the SyntaxHighlighter /styles/ files into my working Theme. 

Step 3 – BlogEngine.Core BlogBasePage.cs

Whenever I’m adding my own javascript to BlogEngine.Net I typically choose to add the includes directly into my BlogBasePage.cs file.  This can be found in the full source code version of BlogEngine.Net.  I added the following lines to my version:

AddJavaScriptInclude(Utils.RelativeWebRoot + "scripts/shCore.js");
AddJavaScriptInclude(Utils.RelativeWebRoot + "scripts/shBrushCSharp.js");
AddJavaScriptInclude(Utils.RelativeWebRoot + "scripts/shBrushJScript.js");
AddJavaScriptInclude(Utils.RelativeWebRoot + "scripts/shBrushXml.js");

Step 4 – Your Master Page

Finally, at the bottom of your master page, before the closing body tag, put the following script block:

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Step 5 – Test!

A simple test can be performed to ensure that the SyntaxHighlighter is working accordingly.  Just add a sample like the following to a new post and see if it displays like the code snippets in this post.

<pre class="brush: js">
alert("Does this really work?");
</pre>

Hint:  You might want to use Fiddler to ensure that you aren’t getting any 404/Not Found responses for the css + javascript files you just included in your project.

Since I just completed all of these steps for this blog, I’m hoping to get more code samples from my various projects posted.