Syntax Colorer

The script file syntaxcolor.js automatically colors the content of every <code class="js"> block on the page.

More accurately, if you include this JS file, the contents of every <code> block are examined for potential JS code. Where it is found, <span> tags are wrapped around the code, along with one of the following CSS classes:

paren - wrapped around every (, ), {, }, [ or ] character seen.
keyword - wrapped around each of the following words: function var if isNaN return if else for while new continue switch case true false prototype constructor caller Number Date Object String Function Array RegExp Boolean Math
string - wrapped around each occurrence of '...' or "..."; correctly accounts for escaped delimiters (e.g. var x = "They call me Gavin \"Ilik\" Kistner").
comment - wrapped around each occurrence of //... or /*...*/
number - wrapped around each occurrence of numbers (which are not part of a variable name).

Due to a limitation in the syntax colorer, 'code' is still marked inside strings and comments; you can overcome this with CSS such as:

code .string,
code .string .keyword,
code .string .paren,
code .string .string,
code .string .number    { ... }

code .comment,
code .comment .keyword,
code .comment .paren,
code .comment .string,
code .comment .number   { ... }

And now, a code block to test this all out:

/***************************************
* This function does things the slow way
* just to show you a cooler way to do it
***************************************/
function squareMe(x){
  return Math.pow(x,2);
  //return x*x;
}

function sayHello(){
  for (var i=0,len=Math.round(Math.random()*10);i<len;i++){
    alert("Hello! Message #" + i +"; hope it didn't annoy you!");
  }
}

// Test section
var x1 = someMath; // 'Math'   shouldn't look like a keyword
var x2 = aardvark; // 'var'    shouldn't look like a keyword
var x3 = unswitch; // 'switch' shouldn't look like a keyword
var x4 = a1234567; // a1234567 shouldn't look like a number

var sum = 1 + 1000 / 12.00 - 13 * -.12; //all numbers should be distinct (bug on last)

var str = "'It's the \"end\" of the world\\\"earth\" as we know it.";
str  +=   '..and I feel "OK" ishness,\' she (someone) said.';

/* This comment // has another one /* inside it */

Automatic JS Syntax Color Tester