.NET and Open Source: better together

RTur.net

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

Syntax Highlighter extension for BlogEngine

logo

There are several implementations of this extension for BlogEngine, but I wanted it to work with latest JS library and be more configurable. And also I wanted it play well with TinyMCE - yes, it might come as a shock but some people don't use Windows Live Writer. I don't know why... So, if you go through usual routine downloading and moving files to corresponding location (you’ll need to overwrite couple) this is what you’ll get.

1. Configurable options for syntax highlighting. You can set it way you like by checking your options in the admin/extensions/edit page.

options

brushes2. Ability to select brushes. Latest Syntax Highlighter comes with 22 (!!!) built-in brushes, each represents language supported by this library. Every language comes with it’s own JavaScript file, and you don’t want reference those you don’t use. Here you can make a selection of languages you commonly use in your blog posts to lighten JS downloads and speed things up.

 

themes3. Themes selection. I was not particularly impressed with themes and decided to stick with default one, but if you are using dark colors on your blog, you might find that one of the custom themes serves you better. You can always  easily change it back and force from edit settings menu.

 

codebtn4. To make it a little easier to work with web editor, the “CODE” button added to the TinyMCE toolbar. When in “edit” mode, click anywhere in the text and push button to add standard snippet to the editor, then modify it with your code and, if needed, change “brush” (language) from C# to the one of your choice. This clearly requires some extra work, but for now it will make things easier. The result of insertion should look exactly like this:

function foo()
{
    return 0;
}

I have also included “Settings.ascx.cs” file that fixes small glitch in Extension ManagerBlogEngine 1.5 has label width set to 100px and I have reset it to 250 to match text box size and let longer labels look better.

I really think that we should add this formatter to the next BlogEngine version and faze out current code formatter BE uses. It is much better supported and a lot more robust. Please feel free to download and try it, and you’ll see it for yourself.

Update: there was a bug fix, RSS feed would not work when casting to Page. Download file is updated but if you already downloaded version with this issue, you only need to add one line of code to make it work with RSS feed.

 

private void AddSyntaxHighlighter(object sender, ServingEventArgs e)
{
    // add this line to fix RSS
    if(e.Location == ServingLocation.Feed) return;

    ...

    context.Items[ExtensionName] = 1;
}

 

SyntaxHighlighter.zip (102.76 kb)