thefrozencoder

Programming and Technology blog

Code highlighting integration for BlogEngine.NET 1.5.x

I decided to integrate some code highlighting into my blog rather than taking screen captures of my code and posting those into the blog.  As I found this requires integrating a code inserting plug-in for TinyMCE 3.x to insert code into the editor and format it properly and syntax highlighting extension for the actual posted code.  The two I chose were:

David Pokluda’s Windows Live Writer Source Code Plug-in found here. I simply took the BlogEngine.NET bits from the download and followed the instructions to install it.  This download also included Alex Gorbatchev’s syntax highlighter - v. 2.0.296 – found here.  The idea is there is a BlogEngine.NET extension that writes the SyntaxHighlighter js code to the pages.

And the code inserting plug-in for TinyMCE v3.x I got from Nawaf’s Blog found here.

I had to do some tweaking to get the TinyMCE plug-in to work the way I wanted.  By default the plug-in wraps the code in a HTML textarea along with some attributes (settings) in the class attribute.  I really don’t like that approach (having a textarea in a post and or the TinyMCE editor when editing).  So I ended up changing the plug-in code to output a HTML pre tag and mapping some of the settings from the plug-in to the settings of the syntax highlighter code since Alex Gorbatchev’s code looks for a pre tag anyway.

The changes I made to the plug-in were in the codehighlighting\js\codehighlighting.js file and these are the changes I made:

function Save_Button_onclick() {
    var lang = document.getElementById("ProgrammingLangauges").value;
    var code = WrapCode(lang);
    code = code + document.getElementById("CodeArea").value;
    code = code + "</pre>";
    if (document.getElementById("CodeArea").value == '') 
    {
        tinyMCEPopup.close();
        return false;
    }
    tinyMCEPopup.execCommand('mceInsertContent', false, code);
    tinyMCEPopup.close();
}

function WrapCode(lang) {

    var options = "auto-links: true; first-line: 1; light: false; ruler: false; smart-tabs: true; tab-size: 4;brush: " + lang + ";";
    var html = "";

    if (lang == 'js' || lang == 'jscript' || lang == 'javascript')
        options = options + "html-script: true;";
    else 
        options = options + "html-script: false;";
        
    if (document.getElementById("nogutter").checked == true)
        options = options + "gutter: false;";

    if (document.getElementById("collapse").checked == true)
        options = options + "collapse: true;";

    if (document.getElementById("nocontrols").checked == true)
        options = options + "toolbar: false;";

    html = "<pre class='" + options + "'>";

    return html;
}

function Cancel_Button_onclick() {
    tinyMCEPopup.close();
    return false;
}

As you can see most of the changes were to the WrapCode function (if you compare the original to my version side by side).  Other than that nothing really needed to be done to the syntax highlighter code or the BlogEngine.NET extension.

Instructions for installation can be found on each respective website.

Note: There is a bit of weirdness with the TinyMCE plug-in where if there is HTML tags in your code you will need to manually encode them, I am not sure what is going on but I find it's not that much of a big deal.

Enjoy

No more IE6 BlogEngine.NET Extension

So I decided to update my blog engine to the newest version and along with that I wrote a simple extension to detect IE6 users and redirect them to a non-supported browser page.  Not that my theme cannot handle IE6 but I feel I should get on board and help as much as I can with the movement to rid the internet of this outdated browser.

The extension is pretty simple and uses the built in Response.Browser object which should work for IE6 nicely.  To make an extension for BlogEngine is pretty easy just create a class with a constructor with no parameters and then wire up one or more events that the BlogEngine raises to your event in your extension class.  Below is my extension class for the redirect logic.

using System;
using System.Web;
using BlogEngine.Core;
using BlogEngine.Core.Web;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core.Web.HttpHandlers;

[Extension("Redirects users with non-supported browsers to an alternate download page", "1.0", "thefrozencoder.ca")]
public class NonSupportedBrowser
{
    public NonSupportedBrowser()
    {
        Post.Serving += new EventHandler(ServingHandler);
        Page.Serving += new EventHandler(ServingHandler);
    }

    void ServingHandler(object sender, ServingEventArgs e)
    {

        HttpContext context = HttpContext.Current;

        if (context != null && !context.Items.Contains("NonSupportedBrowserTest"))
        {
            System.Web.UI.Page page = context.CurrentHandler as System.Web.UI.Page;

            if (page != null)
            {
                context.Items.Add("NonSupportedBrowserTest", 1);

                if (context.Request.Browser.MajorVersion <= 6 && context.Request.Browser.Browser.Equals("IE"))
                {
                    string file = System.Configuration.ConfigurationManager.AppSettings["NonSupportedBrowser"];

                    context.Response.Redirect(file, true);
                }
            }
        }
    }
}

As you can see in the constructor I wire up the Page.Serving and Post.Serving events to my own method.  I create a context item (NonSupportedBrowserTest) and check for it because the event will be called more than once in the lifetime of the request.   I also store the file name in an appSettings key/value so I can change the file to be redirected to (simple HTML file in this case).  All that is required is to place the code file in the App_Code\Extensions folder and add the HTML file with the instructions to download a newer browser.

If you are looking for some ideas for this page I simply used the code from the IE6 No More website.