Alex Gorbatchev has made a fantastic piece of software called SyntaxHighlighter, that uses JavaScript to present formatted code posted on a blog. As an example here is a little code snippet formatted as C#
// Returns the sum
public int Add(int a, int b)
{
return a + b;
}
And here it is unformatted
// Returns the sum
public int Add(int a, int b)
{
return a + b;
}
To make the code use SyntaxHighlighter, it is put inside <pre> tags, where the brush to use is set. The example code including the tags looks like this:
<pre class="brush: csharp;">// Returns the sum
public int Add(int a, int b)
{
return a + b;
}</pre>
Before this functionality can be used however, one has to add some JavaScript and Css stuff to the headers of post pages. And in my search for how to add this to my blog, i stumbled upon this blog post by Chris Blankenship. He had made an extension to BlogEngine that automatically adds the necessary stuff. Very cool I think!
However, the extension is created for SyntaxHighlighter 1.5 and the one I have installed is version 2.0. And there are some differences. So I set out to modify the extension a little so it would support the new version of SyntaxHighlighter. Those small modifications soon turned out to be big ones, since i wanted dynamic recognition of available brushes. Version 2.0 also comes with styles that can be applied, and I wanted and easy way to change the style. So in the end the extension has gone through a complete rewrite and have got a custom made admin page added as well.
Extension Features
This is the list of features for the extension:
- Automatically imports SyntaxHighlighter JavaScript and Css files.
- The path to SyntaxHighlighters styles and scripts folders can be changed from the admin page.
- The brushes to load is configurable.
- If brushes gets uploaded or deleted, the list of brushes can be updated through the admin page.
- The style used can be set.
- The list of styles can be updated if more styles are added.
Installation
- Download the extension from CodePlex.
- Unzip and upload the folders to the root of your blog.
- Open your blog and log in as Admin.
- Go to the Extension tab in the Administration part of the blog.
- Click on the edit link for the SyntaxHighlighter extension.
- Change whatever needs to be changed and save.
Configuration
There are three parts in the admin page: Folders, Brushes and Styles.
Folders
This is where the path to the styles and scripts folders are stored. The path is relative to the root of the blog.
Brushes
Select the brushes that should be loaded. If the installed brushes are changed, a click on the Update Brush List button will load the brushes a new from the scripts folder and it will reset all brushes to the selected state. This setting will only be shown if the scripts folder exists.
Styles
This is where the style is chosen. And just as with the brushes, there is a button to update the list if new brushes are added. This setting is only available if the styles folder exists.
Subscribe