I used to like Syntaxhighlighter, but when I started using blogengine.net I did not implemented it. In blogengine.net a plugin is available from manoli.net.
The bad part is, that I have to go to the manoli.net website and generate html from my C#, SQL, Javascript and other code, every time I want to use code in my posts.

So I started to look into Syntaxhighlighter again. It matured quite a bit, but still lacks type support (manoli also does not support this, by the way!). Still, I like it a lot, I suppose it can save me lots of time.

Beauty of Code jQuery plugin

Lars Corneliussen wrote a jQuery plugin for SyntaxHighlighter and it makes the process of incorporating it on a html page a lot smoother. I used this with my first tryout to use the plugin in blogengine.net. I think it is an elegant way to use syntax highlighter, so i want to share, how it works. Ofcourse you have to reference jQuery in the head element of your page. In addition to that we add a reference to the jquery.beautyofcode.js (the code written by Lars).

	
	

Listing: 1

To initialize the highlight functionality, you have to add the following javascript code to a page:

$.beautyOfCode.init({
	brushes: ['Plain', 'CSharp', 'Xml', 'JScript', 'Css', 'Sql']}
);

Listing: 2

All I have to do now is to start using it, as followes:

    
	<code class="JScript">
		alert('Hi, I love highlighted syntax!');   
	</code>  

Listing: 3

The point is that my blog does not accept the pre tags with a nested code tag that has a class attribute. TinyMCE is used and somehow it strips the entire class attribute, thus the highlighting never takes place…

I am now using the default way, without jQuery. This works niceley, with a caveat: XML tags (html) are transformed to uppercase, when saving a post through the TinyMCE standard blogengine.net manner of creating and editing posts, but also when using Windows LiveWriter. I will try to find out more about this, because I really do not like uppercase tagnames!

The default syntax highlighter configuration

First you need to reference the scripts and stylesheets syntax highlighter needs to do the job, so in the head of the page you need to highlight code on, you add the following js and css references:













Listing: 4

Of course you only need to add the the brushes that you really use.

Next you need to instantiate the javascript object, you need to add the following javascript in a script block (also in the head of the page):

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();

Listing: 5

The clipboard.swf (Flash file) is used to make it possible for the user that visits your site, to copy the code to his or her clipboard, without an alert from the Operating System. The .all() method initializes takes care of the actual highlighting.

Now I can use it, by letting syntax highlighter know what brush to use, like this:

    
	alert('Hi, I love highlighted syntax!');    

Listing: 6

The next few posts, I will try it out some more, but the first impression is a positive one.

Henry Cordes
My thoughts exactly…