Testing a new syntax highlighter

Posted by ben 13. June 2010 22:01

This morning I have been looking for a better way of formatting code on my blog. Many blogs such as WordPress have plugins that use the SyntaxHighlighter javascript library by Alex Gobatchev.

Well lucky for me, someone has done just that for BlogEngine. You can download the extension here.

Rtur has made if very easy to manage the javascript library settings by encapsulating them into BE extension settings.

The install notes aren’t very descriptive so to help others, these are the steps I went through to install the extension.

  1. Download the zip file from the above link and extract.
  2. Override /admin/tinyMCE.ascx in your site with the version included in the zip file (this essentially adds the ‘insertcode’ plugin and button into tinyMCE).
  3. Copy /App_Code/Extensions/SyntaxHighlighter.cs into the App_Code/Extensions directory of your site.
  4. Copy the /editors/tiny_mce3/plugins/insertcode directory into the /editors/tiny_mce3/plugins directory of your site.
  5. Copy /User Controls/syntaxhighlighter_2.1.364 into the User Controls directory of your site.
  6. That’s it. You may have to clear your browser cache to see the new code button on the tinyMCE toolbar.

I’ve already started adapting the Midnight theme for my site. You can tweak the css inside the syntaxhighlighter_2.1.364/styles directory. If you want to add a new CSS file for your custom theme, you will need to update the extension to provide this as an option:

private void AddCssStyles()
    {
        AddStylesheet("shCore.css");

        if (_themes != null)
        {
            switch (_themes.GetSingleValue("SelectedTheme"))
            {
                case "Django":
                    AddStylesheet("shThemeDjango.css");
                    break;
                    case "Emacs":
                    AddStylesheet("shThemeEmacs.css");
                    break;
                case "FadeToGrey":
                    AddStylesheet("shThemeFadeToGrey.css");
                    break;
                case "Midnight":
                    AddStylesheet("shThemeMidnight.css");
                    break;
                case "Dark":
                    AddStylesheet("shThemeRDark.css");
                    break;
                default:
                    AddStylesheet("shThemeDefault.css");
                    break;
            }
        }       
    }

The thing I did like about the old code formatter is that it was easier to use within Windows Live Writer.

To use this extension within Windows Live Writer, you just need to switch to source view and wrap your code with the following tags:

<pre class="brush: c-sharp;">private void AddCssStyles()
   {

   }       </pre>

Tags:
Categories BlogEngine.NET | Development

Enabling code formatting in BlogEngine.NET

Posted by ben 28. November 2009 21:46

One thing I wanted on my blog was too display nicely formatted code snippets. Looking in the extensions section within settings CodeFormatterExtension was enabled. Documentation does seem to be  a little scarce in how to actually use it – but eventually I came across this article. So all I needed to do was wrap it in code blocks and it should work right??….wrong (well at least for my theme). I got:

image

The root cause of this is that the Clarity theme I installed has not been updated to support version 1.5 of BlogEngine.NET – so it does not support widgets and apparently did not support code formatting.

Since I did not have the source for BlogEngine.NET on my machine I opened up BlogEngine.Core.dll in Reflector and thought I would see how the server side formatting was done:

image

Sure enough looking in PostView.ascx for the standard theme I had:


<div class="text"><asp:PlaceHolder ID="BodyContent" runat="server" /></div>

But in PostView.acsx for my theme, I just had:


<%=Post.Content%>

To resolve all I did was add the asp:PlaceHolder instead, then found the css in the standard theme style.css and added this to the Clarity theme.

I think I will probably end up creating a theme from scratch based on the standard theme so I can make sure it is fully compatible with the latest version of BE – but for now, at least I have pretty code snippets.

Tags: ,
Categories BlogEngine.NET