JSHighlighter :: JavaScript Syntax HighLighter

JavaScript is frequently posted on blogs, forums or tech sites. Syntax highlighting is not simple and often is made by server side script or program language. This server-side languages are powerfull but uses many resources to parse small, medium or big source codes and they must send highlighted code to clients using a lot of bandwidth.
There are many differents highlighters and they're all cool, good or fast enought and parse different languages, but today there are a lot of sites or project areas that are dedicated only to JavaScript.
This class should reduce server CPU load and bandwidth delegating highlights to clients.
This class is unobtrusive, then clients that haven't JS compatible/enabled browser should view the code (of course, without highlight).
You could use this JavaScript class to:

• highlight javascript syntax on a blog, using, for example, a getElementsByTagNames("PRE") loop if there are many sources
• highlight javascript syntax on a forum, for example using "bbcode" syntax as referer for replacements directly with JS on each post
• highlight manually javascript, to post JS highlighted on a forum or blog
• wathever you like, if you need a javascript syntax highlighter :-)

What is the JSHighlighter ?

JSHighlighter is a JavaScript dedicated Syntax Highlighter. Maybe one day I'll modify JSHighLighter to parse different languages :-)

What's about compatibility ?

JSHighlighter requires JSL and then is compatible with all JavaScript 1.2 browser, starting from IE4.

Which are JSHighlighter features ?

• really fast basic highlight that should be used with some other languages too (ActionScript and maybe others)
• complete full highlight (not fast as basic convertion with old CPUs)
• compatible with all JS 1.2 or greater browser
• unobtrusive way to highlight javascript source code

How to use JSHighlighter ?

First thing to do is to include JSL on your page before every script tag
<script type="text/javascript" src="JSL.js"><!--// (C) JSL //--></script>
SourceMap.js file is necesary too because JSHighLighter is based on this source code map creator class.
<script type="text/javascript" src="SourceMap.js"><!--// (C) SourceMap //--></script>
Then you can include every other script and JSHighlighter too
<script type="text/javascript" src="JSHighlighter.js"><!--// (C) JSHighlighter //--></script>
Now you can use one or more new JSHighlighter() objects, with a theme scheme as first argument and optional boolean to full highlight file as second.
Look at the demo code to know more

/** JSHighLighter,
 *	home page demostration, parsed with JSHighLighter class
 */

// Internet Explorer doesn't display correctly white spaces on tags PRE with innerHTML
// this simple function verify if browser is IE to use outerHTML instead of innerHTML
function ie() {
	var	browser = navigator.userAgent.toUpperCase();
	return (browser.indexOf("MSIE") >= 0 && browser.indexOf("OPERA") < 0);
};

// this function just verify user selected options
function highlight() {
	var 	full = document.getElementById("fullhighlight").checked,			// full highlight ?
		html = document.getElementById("usehtml").checked,				// use html tags instead of \n\r or \t ?
		code = document.getElementById("source").value.replace(/^\s*|\s*$/, ""),	// wich highlighter need to use ?
		JSH = full ? JSHFull : JSHFast;
	
	// if user has wrote something ...
	if(code.length > 0) {
		
		// code will be highlighted text
		code = JSH.parse(code, html);
		
		// if user has IE ...
		if(ie()) {
			// ... enjoy outerHTML "hacks" to presever white spaces
			document.getElementById("jshcode").outerHTML = "<pre id=\"jshcode\">" + code + "</pre>";
			document.getElementById("htmljshcode").outerHTML = "<pre id=\"htmljshcode\">" + code.split("<").join("&lt;").split(">").join("&gt;") + "</pre>";
		}
		else {
			// this code is for Browsers
			document.getElementById("jshcode").innerHTML = code;
			document.getElementById("htmljshcode").innerHTML = code.split("<").join("&lt;").split(">").join("&gt;");
		};
	};
};

// theme Object defines wich classes parser should use
var theme = {
	"comments":"jshcomments",	// single or multiline comments span class
	"strings":"jshstrings",		// strings span class
	"numbers":"jshnumbers",		// numbers span class
	"operators":"jshoperators",	// operators span class
	"globals":"jshglobals",		// OPTIONAL: global top level functions or some reserved words
	"properties":"jshproperties",	// OPTIONAL: Objects properties (i.e. str.length )
	"methods":"jshmethods"		// OPTIONAL: Objects methods (i.e. str.charAt(... )
},

// JSHighLighter with full sintax (strings, numbers, operators, comments, globals, properties, methods)
JSHFull = new JSHighLighter(theme, true),

// JSHighLighter with basic highlight (strings, numbers, operators, comments)
JSHFast = new JSHighLighter(theme);

Visit the Demo Page, Demo Page 2 and Download JSHighLighter or, if you want, look at the unpacked Source Code