Conan, what is best in #{javascript syntax highlighters}?

 

We often find ourselves asking our co-workers, “Does anybody have recommendations for #{task X}?” Frequently, the collective response is based on little more than, “Well, in the past, I had success with #{solution Y}.” This is the first in a series of blog posts in which we search for a more empirical answer.

In this case, we have taken over an old rails 2.0.2 application, largely unmaintained for some time. The app allows users to exchange and compare code snippets in a variety of languages. As one of our first tasks in refactoring and updating this app, we have decided to move the task of syntax-highlighting those code snippets from the server into a client-side javascript function. A cursory examination reveals several candidates: highlight.js, prettify, jquery-syntax, syntaxhighlighter, shjs, and lighterjs.

Installation and use of all the candidates is very similar. After downloading the code and placing it into the appropriate folders (public/javascripts and public/stylesheets), we simply add the relevant includes to our application’s layout’s head section. Activating the syntax highlighting is then simply a matter of triggering the function, either by adding it to the layout’s <body> tag as an onload event, or by manually triggering the function within a second <script> tag within <head>. All the candidates then detect source code surrounded by <pre> blocks (with minor differences) and highlight it.

Here we compare the candidates libraries on the criteria of 1) ease-of-use 2) avoiding conflict with javascript frameworks already part of the app 3) number of languages supported and 4) style. Note that since we are looking at a legacy app which still uses prototype, and we are trying to get the app running as quickly as possible, #2 is important for now. As we continue to refactor the application, it is likely that we will remove prototype, which could alter these results.

The Lineup

    • First up, we have highlight.js by Ivan Sagalaev. Installation is easy: the only customization needed was ensuring that the code snippets were surrounded by BOTH <pre> and <code> tags. Highlight.js works very fast, and handles language detection itself (although you can specify a language if needed by adding the name of the language as a class to the <code> tag). Unfortunately, it had trouble with erroneously coloring the background of several snippets, rendering them illegible.

 

    • Next, prettify from Google. For the legacy app we are using, it worked out-of-the-box with no tweaks required beyond adding class=”prettyprint” to the <pre> tags. The source claims to have minor trouble with a few languages, but in practice no problems were observed. Language detection is automatic, but you can, if needed, specify it explicitly by adding a “lang-XXX” class to the <pre> tag.

 

    • Syntaxhighlighter by Alex Gorbatchev was highly recommended. The version marked current at the time required me to add the xregexp library manually. For the languages supported, SyntaxHighlighter worked well, but the number of those languages was relatively small. It was notably missing Haskell, ASP, and sh. It also includes a small-yet-noticable “?” icon on every snippet, which acts as an attribution pop-up. While we believe the attribution is appropriate, for an application with many snippets per page, the ubiquity of the icon becomes distracting.

 

    • SHJS installed without difficulty. It supports many languages and ships with many themes. The <pre> class required to activate highlighting and the highlighting functions themselves all begin with a “sh_” prefix, which minimizes risk of interaction with other javascript libraries. While it performed admirably on pages containing snippets all of the same language, it did have difficulty on pages with different language snippets, failing to highlight the later entries. Automatic language detection is possible for this entrant, but explicit labeling is noticeably better.

 

The Results Are In

So, Conan; what IS best in javascript syntax hightlighters? Prettify wins for ease-of-use and for lack of any immediate problems. All the other contenders would have required tweaks for minor issues, whereas prettify was a completely drop-in solution.

One final note – performance was intended to be one of the criteria for comparing the candidates, but using Speed Tracer for chrome and FireBug for firefox revealed no significant difference amoung them. In fact, none of the candidates were even close to being weighty enough to make a difference to the pages’ load times.