A JavaScript-based syntax highlighting engine

/**************\
 *                                                                ____   _____
 * 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.
 *
\******************************************************************************/

Try it out

— or paste the code below and select the appropriate language — and click Do It Now

Line numbers |

// single line comment

/*************
 **
 *  multi-line
 *  comment containing
 *  an url: http://www.dynarch.com/
 **
 *************/

// ** 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 <span class="hashkey">different style</span>.
 * 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");
	}
};

"Documentation"

The easiest way to call it:

DlHighlight.HELPERS.highlightByName("fooname", "pre");

And you can write code like this:

<pre name="fooname" class="js">
  function foo(bar) {
    // displays bar if it matches "baz":
    if (/baz/.test(bar)) {
      alert(bar);
    }
  };
</pre>

And the result would look like this:

function foo(bar) {
  // displays bar if it matches "baz":
  if (/baz/.test(bar)) {
    alert(bar);
  }
};

For more advanced stuff, use the source Luke!