15 July, 2009


For a long while now I had been using the wonderful SyntaxHighlighter for syntax highlighting on this blog.

I had a (possibly) odd requirement, however: I wanted to be able to syntax highlight code that was inline with non-code. Here's an example:

Blah blah blah var foo = "foo"; blah blah blah.

SyntaxHighlighter won't let you do that. I created a quick stand-alone program that would allow for inline highlighting, but that added even more bloat to an already-big program. (SyntaxHighlighter is 1,984 lines long!)

I then decided to create my own syntax highlighter. One that was designed from the ground up to be very minimal and light-weight, and one that easily supported inline highlighting. The fruit of my labor is the KAE.query.highlight plugin.

Wait. Plugin? Not program? KAE.query.highlight relies on the KAE.query module in order to function. This may seem like a disadvantage at first, but let's look at the benefits:

  1. Allows syntax highlighting on any element, not just those with a special class.
  2. Provides a platform for building other useful plugins.
  3. KAE.query plugins can easily be ported to jQuery, due to the similarities in architecture.

What is KAE.query, anyways? Think of it like jQuery without any features. You pass in a string, and KAE.query will return the DOM elements that match the string, just like jQuery. It supports a plugin system that is very similar to jQuery's plugin system. Unlike jQuery, however, it lacks any useful methods: those must be provided with plugins. In essence, it is a light-weight stripped down version of jQuery.

I don't harbor any ill feelings toward either jQuery or SyntaxHighlighter. However, both projects are targeted at something I don't need. I just wanted a simple way to extend the DOM NodeList, providing useful methods, like syntax highlighting.

Having said that, you might wonder why anybody would choose KAE.query.highlight over SyntaxHighlighter. Here are some reasons why I decided to create a new project:

  • Can be used to apply syntax highlighting with different options to different elements. For instance, you may want to apply different settings to a <code> tag than you would want to apply to a <pre> tag.
  • Much smaller in terms of code size. This can make a big difference when viewers have not cached the JavaScript file.
  • Uses a library-agnostic brush system that allows all JavaScript highlighters to use the same brushes.
  • Non-destructive: KAE.query.highlight works on the original element, so any styles are preserved.
  • Easily allows for syntax highlighting of inline elements.
  • Much much faster.

An interesting side effect of making it a KAE.query plugin is that it's backwards compatible with SyntaxHighlighter. You shouldn't need to change any HTML markup: it'll just work.

Some of these changes could be merged back into SyntaxHighlighter; in fact I encourage it. Some of the changes, however, may not be accepted.

Please do file any bugs or suggestions on the bug tracker listed below.

[LINK] Bug Tracker

[LINK] KAE.query
[LINK] KAE.query.highlight

No comments:

Post a Comment