JavaScript Syntax Highlighter - Test Results
3 June 2010
These are my test results of various JavaScript syntax highlighters.
The column Joffe refers to my syntax highlighter found here.
A green cell is a pass, yellow is N/A, red is fail. "SyntaxHighlighter" has many cells coloured yellow due to it not styling variables, numbers, operators or regular expressions (quite a surprising shortcoming given its popularity).
Note: I have not included many tests that all the libraries pass, so despite the table being filled with many red cells, most of these libraries do actually do a pretty good job of highlighting real world code accurately.
You can click the titles to view the pages I used to test the libraries. These were accurate as of January 2010, I forgot to include the version numbers of the various libraries, I apologise for this (and will fix it when I have some time), for now you can view the source of the test pages if you want to find out which versions are used.
| Joffe | Prettify | SyntaxH | SHJS | Chilli | Lighter | DLH | Jush | Notes | |
| Style regular expressions | |||||||||
| Style regular expressions and strings separately | |||||||||
| a = 1; | |||||||||
| a = 0.1; | |||||||||
| a = .1; | Period not coloured as part of the number in most highlighters | ||||||||
| a = 0x; | Not strictly valid JS but some browser allow it. Probably should remove this test. | ||||||||
| a = 0xfF1; | |||||||||
| a = 0XE; | |||||||||
| a = 1e1; | |||||||||
| a = 1E1; | |||||||||
| a = 1e+1; | |||||||||
| a = 1e-1; | |||||||||
| a = 1.e1; | |||||||||
| a = 0xe+1; | Hex numbers can't use exponential notation so the '+' is an operator | ||||||||
| a = 1 .method(); | Note the space, this is what makes this valid JavaScript | ||||||||
| a = 1..method(); | First dot is part of the number, second dot is an operator | ||||||||
| a = 0.1.method(); | First dot is part of the number, second dot is an operator | ||||||||
| a = .1.method(); | First dot is part of the number, second dot is an operator | ||||||||
| a = 1e1.method(); | |||||||||
| a = 00.method(); | Opera incorrectly throws a syntax error (though probably is a syntax error in ECMAScript 5 Strict) | ||||||||
| a = 0x.method(); | |||||||||
| a = 0xF.method(); | |||||||||
| a = "x"; | |||||||||
| a = "x\ y"; |
|||||||||
| "x"; | |||||||||
| a = 'x'; | |||||||||
| a = "x'y"; | |||||||||
| a = 'x"y'; | |||||||||
| a = "x\"y"; | |||||||||
| a = "x\\\"y"; | |||||||||
| a = "x\\"; | |||||||||
| a = /regexp/; | |||||||||
| /regexp/; | |||||||||
| /regexp/g; | |||||||||
| /"regexp"/; | |||||||||
| /reg[/]exp/; | |||||||||
| /reg\/exp/; | |||||||||
| /regexp//1; | |||||||||
| /\/*regexp*/; | |||||||||
| /[/*regexp*/]/; | |||||||||
| !!/regexp/; | |||||||||
| ((/regexp/)); | |||||||||
| [[/regexp/]]; | |||||||||
| a = 1/2/3; | |||||||||
| a = a/1/2; | |||||||||
| a = a++/2/3; | |||||||||
| a = this/1/2; | |||||||||
| a = (1)/2/3; | |||||||||
| a = []/1/2; | |||||||||
| a = {}/1/2; | |||||||||
| ({}/1/2}; | |||||||||
| +{}/1/2; | |||||||||
| {}/regexp/; | |||||||||
| /regexp/ /1/2; |
|||||||||
| function(){} /regexp/; |
|||||||||
| do /regexp/.test('x') while(false); | Firefox incorrectly throws a syntax error | ||||||||
| true ? {} : {}/1/2; | |||||||||
| a = a /1/2; |
|||||||||
| var a /regexp/g; |
:( | ||||||||
| a = 1 /2/3; |
|||||||||
| a = 1//comment | |||||||||
| a = 1/2// comment | |||||||||
| a = 1 / 2; // comment | |||||||||
| a = 1//comment /2/3; |
|||||||||
| a = 1/*comment*//2; | |||||||||
| a = 1+/*comment*/1/2; | |||||||||
| a = 1/**//2; | This test causes DLH to completely break. | ||||||||
| /*/ comment /*/ | |||||||||
| /*/\* comment */ |
|||||||||
| // /* */ comment | |||||||||
| a2 = 1; | |||||||||
| π = 1; | |||||||||
| \u0061 = 1; | |||||||||
| a\u03c0 = 1; | |||||||||
| a\u01Acπ = 1; |