Brian's Blog

items I see across my tribes

Source Code in your Blog

April 25
by briancarter 25. April 2009 10:26

I have been struggling with adding code to my blog entries, never really finding anything that just worked. Yes I know, there are various code formatting solutions out in the wild.

I finally found one that integrates into BE.N, has some exceptional features, and is easy to use: SyntaxHighlighter. Several people have blogged about it's capabilities: popup view of plain text, copy to clipboard link, and many other features help to make this an exceptional code formatter. Here's an example of what the result looks like:

    private void AddSyntaxHighlighter(object sender, ServingEventArgs e)
    {
        HttpContext context = HttpContext.Current;
        if ((context.CurrentHandler is Page == false) || (context.Items[ExtensionName] != null))
        {
            return;
        }

        Page page = (Page) context.CurrentHandler;

        AddJavaScriptToPage(page);
        AddStylesheetToPage(page);
        AddSyntaxHighlighterScriptToPage(page);

        context.Items[ExtensionName] = 1;
    }
I started using Windows Live Writer for authoring my blog posts. It is very user friendly application that allows you to forget about the limited web interface your blog engine has for authoring posts. As a developer I wanted to be able to paste source code samples into my posts and be able to format them accordingly. Fortunately Alex Gorbatchev wrote a simple JavaScript application that will format source code according to parameters in the PRE element in which the code is placed.  David Poluda provided a solution for BE.N.  All we need to do is:
  • add support for Alex Gorbatchev’s SyntaxHighlighter to your blog (server)
  • teach Windows Live Writer to enter the right parameters whenever you insert a source code snippet in one of your posts
David created SourceCodePlugin project on CodePlex to include a solution to the above mentioned needs. The project has two parts: SyntaxHighligher for BlogEngine.NET and SourceCode plug-in for Windows Live Writer. Writer wraps your code with the <Pre tag and settings.  You could do this manually, but I found it to be a little error prone and time consuming.  Plus Writer has a spell check.  

Installing it is straight forward. 

1 Install WindowsLiveWriter.  You don’t need Writer, but it helps with the syntax.   

2 To avoid conflicts, remove the folder for BE.N built in code formatter: App_Code/Extensions/CodeFormatter

3 BlogEngine.net SyntaxHighligter 
* Copy content of BlogEngine.net folder into your web blog folder following the defined folder structure in the zip file.
* Go to the blog Administration page and make sure the new SyntaxHighlighter extension is enabled.

4 WindowsLiveWriter SourceCode plugin
* 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

Now bring up Writer, click the “Source code…” on the right and plug away.

Thank You for listening.

Alternative location for BE.N Extension: SourceCodePlugin_version_1.1.zip (96.75 kb)

Categories: Development

Comments

4/25/2009 1:28:09 PM #

Looks Good!  Easy to use!  Nice feature to view only the code.  Brian.

Brian United States

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading




 Questions or Feedback, my contact information is located on my About page.


The opinions, thoughts, and comments made in these blog posts are solely my own (unless otherwise stated). They do not reflect the opinions, thoughts or practices of my employer, my universities, my family, or anyone else. Also, I retain the right to change my mind about anything I publish here without having to go back and edit posts that occurred in the past. 

These are my opinions, or just as likely, someone else's opinions that I leveraged for my own.