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
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:
- Allows syntax highlighting on any element, not just those with a special class.
- Provides a platform for building other useful plugins.
KAE.queryplugins can easily be ported to
jQuery, due to the similarities in architecture.
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
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
KAE.query.highlightworks 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