HomeProjectsJavaScript Syntax Highlighting Engine

JavaScript Syntax Highlighting Engine

How many times did you want to include colored source code in your articles?  I used to do this manually, using a highlighter based on Emacs—my editor of choice.  This sucked, because it made the source code almost impossible to edit.  Later, I created some server-side code, in Perl, which is based on the excellent colorer library.  This is used to highlight most of the code samples in this very website.

The final, best idea is to let the browser do it. :)  This project is an extensive JavaScript-based syntax highlighting engine.  I found at least 2 other projects that do the same thing, but for various reasons I couldn't use any of them.  Will talk about them later.

DlHighlight, as I decided to call the main object, currently supports the following languages:

  • JavaScript
  • CSS
  • XML
  • HTML

I'll probably add more in the future.  Contributions are welcome—just comment in this page and add your email address so I know how to contact you directly, as you can't attach files here.

Download and usage

Download the full current version (0.1).

The source code is compressed in hl-all.js and the sample css is style.css.  You basically only need to include these 2 files and call:

DlHighlight.HELPERS.highlightByName("code", "pre")

in the <body> onload event handler.  Then to all <pre> tags where you put code, add the attribute name="code" and class="LANG" (LANG can be "js", "css", "xml" and "html").

There is more information in the ZIP file, including full, uncompressed source code.

License

This is free software released under the terms of the GNU General Public License.

JavaScript demo

Support for JS is extensive.  We can highlight 2 types of keywords (“keyword” and “builtin”).  A “builtin” is something that's usually present in any JS interpreter, such as the global object (window), or the alert() function.  We also highlight literal regexps, function names or hash keys.  All this is possible because the token parsers can have an idea about “context”.

Strings, comments, regexps (and generally, everything which starts and ends with something) can have the start/end markers colored differently.  It's easy to customize this, as you can see in the CSS (look for .before and .after classes).  It also creates hyperlinks for URL-s in the comments.

Colored sample below:

/**************\
 *                                                                ____   _____
 * DlHighlight -- a JavaScript-based syntax highlighting engine.  \  /_  /   /
 *                                                                 \  / /   /
 *        Author: Mihai Bazon, http://mihai.bazon.net/blog          \/ /_  /
 *     Copyright: (c) Dynarch.com 2007.  All rights reserved.        \  / /
 *                http://www.dynarch.com/                              / /
 *                                                                     \/
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation; either version 2 of the License, or (at your option)
 * any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc., 51
 * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
 *
\******************************************************************************/

// ** Some code

// whitespace in strings can be displayed (check "Show whitespace
// in strings")
var str = "This string has some whitespace:    foo   bar  baz";

// function names are bolded (gets "defun" class)
function Foo(name, age) {
	this.name = name;
	this.age = age;
};

// works also in this case:
Foo.prototype.getName = function() {
	return this.name;
};

var f = new Foo("John", 20);

// ** Literal regexps

// regexp quotes (/) and modifiers (mg) are highlighted with a different style
test(/(^foo|bar)/mg, "foo");

// supports ", ', \ and / inside the regexp -- even Emacs messes this out ;)
if (/'foo\/bar"baz/.test("foo")) {
	alert("match");
}

// ** Hashes

/**
 * Hash keys are colored with a different style.
 * They also can get additional styles depending on the context--for example,
 * when the value is a function, the key name is bolded (gets "defun" class).
 **/
var hash = {
	foo	    : "bar",
	five	    : 5,
	word_regexp : /\b(\$?[a-z][a-z0-9]*)\b/ig,
	doSomething : function () {
		alert("blah");
	},
};

// Note that it can even spot some errors
// (the last comma shouldn't be there in the above hash)

CSS demo

The support for CSS is rather basic.  We only highlight special syntaxes such as declarations or (pseudo-)class names, etc.  The example below contains an error (line-heigh: 11pt) but we highlight it as a keyword anyway, because of the colon.

It can, of course, be extended, but for now I don't have a reason to. ;-)

@import url("foo.css");

a.Button {
	color: #ff0000;
	text-decoration: none;
	width: 100%;
}

a.Button:hover {
	color: #0000ff;
	text-decoration: underline;
}

.Foo, .Bar, .Baz {
	cursor: pointer;
	line-heigh: 11pt; /* error */
	font: 1.3em "times new roman", georgia, serif;
}

Known problems

Support for line numbers is currently broken in most browsers.  It only works fine with Firefox.  That's because we don't actually generate an <UL>, like most other projects do.  I'll probably fix this in the future.

Similar projects

I found a couple of similar projects on the Web.  They are:

  • http://code.google.com/p/syntaxhighlighter/

    This one produces great looking output and even inserts some functionality, such as “print” and “edit/copy”.  I'll add these to my project as well, just didn't got the time to.

    It's major drawback is that is waaaaay too s-l-o-w.

  • http://www.webessence.nl/projects/highlight/

    Good output and extremely fast.  However, support for JS isn't as extensive as I wanted it to be (it can't highlight literal RegExp-s, no support for before/after markers, no support to highlight hash keys or function names).  I also don't think it can be extended to support all that (but I might be wrong).

    Additionally, I couldn't figure out under which license did the man release it.

Comments

  • By: DerGuteMoritzJun 07 (15:17) 2007RE: JavaScript Syntax Highlighting Engine §

    Hm, I don't see the advantage of this. Server side rendering seems to be the best solution in my opinion. Most of the time, you'll use something like Markdown or Textile for your content anyway, so extending those rendering engines with syntax highlighting seems the best way to go. Save a vanilla version and a rendered version of your pages / blog entries in your database or wherever and only re-render it after updates. That way, you a) don't exclude people who have javascript disabled by default (I wouldn't think of enabling JS to get syntax highlighting) and b) can be sure that you code is rendered consistently by different browsers. Or did I miss anything?
    Still: Great work and I think it can be of great use in legacy publishing systems which are difficult to extend.

    • By: mishooJun 07 (17:40) 2007RE[2]: JavaScript Syntax Highlighting Engine §

      "Use the right tool for the job". ;-)

      I needed it for a product that will be distributed only as JS and HTML (no server-side involved), to syntax-highlight various code samples in the documentation.

      Considering that people will download this and maybe read these docs on their local machine, it's best not to rely on any server-side support.  So that's where it's really useful...

  • By: Michiel van EerdJun 16 (11:27) 2007RE: JavaScript Syntax Highlighting Engine §

    Hi, I'm the person behind the syntax highlighter on www.webessence.nl (one of the projects you refer to). I had a quick look at your code and it is really different than mine (I parse 1 character at a time with charAt and you make a lot more use of regular expressions) - but I think I will learn from it and maybe I can use it in mine ;-). By the way: the license of my project is also GPL (I will add it to the project page).

    • By: mishooJun 17 (11:56) 2007RE[2]: JavaScript Syntax Highlighting Engine §

      Hey, thanks for dropping by. :-)

      Sure, feel free to use any code or ideas you might find useful for your project.  I like your highlighter because it's blazing fast; you should try to keep it that way. ;-)

  • By: tbonesJul 10 (20:01) 2007OT: Your old calendar project §

    Hi Mihai,
    I use your wonderful JS calendar and left some questions/comments on your old homepage´s guestbook. Feel free to answer here or there.

    Greets,
    tbones

  • By: Santosh PatnaikJun 08 (03:43) 2008DIV instead of PRE §

    I'm trying to get the highlighting to work on div instead of pre. The div holds text with the special HTML characters (ampersands, etc.) present as entities, and with new-lines normalized and prepended with break tags. I think div is a better container because long-lines do not run over the edge, and the code text still looks good when Javascript is unavailable on the browser.

    The calling code is - DlHighlight.HELPERS.highlightByName("MyDiv", "div");

    Using Firefox 3 and IE 7 on Windows XP, I seem to get the script to work if (1) un-comment and activate 'html = html.replace(/\n/g, "<br />");' line in the doItNow function, and (2) I remove the conditional 'if (DlHighlight.is_ie)' block in the helper function. However, line-numbering in IE is not good -- some numbers run atop each other.

    The speed of the highlighting script is however slow - both Firefox and IE took about 10 secs to show a 32 kb piece of HTML code. I am therefore not using the script currently. I was hoping to implement its use in the Sourceer source-code viewer application I wrote -- see, e.g., http://www.bioinformatics.org/phplabware/sou…

  • By: kellekkiiJan 22 (00:07) 2010RE: JavaScript Syntax Highlighting Engine §

    Thanks for this! I'll probably use it on my page.
    http://img35.imageshack.us/img35/1154/hls.pn…

  • By: mckincyDec 08 (14:43) 2011in ie9 §

    Hi:
    It repeats itself

    • By: Francisco GámizApr 04 (13:02) 2012RE: in ie9 §

      //IE9 Fix.
      if ($.browser.msie) {
        $("pre.DlHighlight")
          .each(
            function() {
              var $this = $(this);
              $this.html("<pre>" + $this.find("pre").html() + "</pre>");
            }
          )
          ;
      }

Page info
Created:
2007/06/06 11:28
Modified:
2008/09/03 19:04
Author:
Mihai Bazon
Comments:
9
Tags:
css, javascript, programming
See also