Docs & Faqs - Syntax Highlighter
JavaScript code customization
Our highlighters perform a detailed lexical analysis on the source code, based on commonly used browsers and attach different style classes to different language items. Attached CSS classes give you the ability to customize the appearance of the highlighted code as flexibly as possible.In the followings, you can find descriptions about the attached classes and their default color settings. The default settings for these classes can be found in the dottoro-highlighter-v4.css file.
General language items:
Sample code:// single line comment
num = 10;
num--;
// window object has no member
// with name of myProp
window.myProp = num;
/* invalid identifier */
2num = 20;
|
Classes:
|
Keywords and basic data types:
Sample code:var num = 23;
var str = "hi";
var re = /(ab)*/g;
do {
num--;
} while (num > 0);
|
Classes:
|
Objects, properties and methods:
Sample code: // Array is a core object
var arr = new Array ();
// undefined is a global constant
if (x === undefined) {
// parseInt is a global method
x = parseInt ("1010", 2);
}
/* properties and methods
note that the jscript_prop class is attached
to the window object also */
var href = window.location.href;
var input = document.getElementById ("myInput");
input.value = href;
|
Classes:
|
Links
The following style declarations have effect only if the highlighted code contains help links.Sample code:
// var is a keyword,
// /(ab)*/g is a regular expression
var re = /(ab)*/g;
// Array is a core object
var arr = new Array ();
// undefined is a global constant
if (x === undefined) {
// parseInt is a global method
x = parseInt ("1010", 2);
}
/* properties and methods
note that the jscript_prop class is attached
to the window object also */
var href = window.location.href;
var input = document.getElementById ("myInput");
input.value = href;
Classes:
| Class name | Default color | Underlined | Description | Applies to |
|---|---|---|---|---|
|
.jscript_keyword a:link .jscript_keyword a:visited .jscript_keyword a:active .jscript_keyword a:hover |
no no no yes |
keyword link | keywords | |
|
.jscript_regexp a:link .jscript_regexp a:visited .jscript_regexp a:active .jscript_regexp a:hover |
no no no yes |
regular expression link | regular expressions | |
|
.jscript_coreobj a:link .jscript_coreobj a:visited .jscript_coreobj a:active .jscript_coreobj a:hover |
no no no yes |
core object link | core objects that are supported by Internet Explorer, Firefox, Safari or Opera | |
|
.jscript_globconst a:link .jscript_globconst a:visited .jscript_globconst a:active .jscript_globconst a:hover |
no no no yes |
global constant link | global constants that are supported by Internet Explorer, Firefox, Safari or Opera | |
|
.jscript_globmethod a:link .jscript_globmethod a:visited .jscript_globmethod a:active .jscript_globmethod a:hover |
no no no yes |
global method link | global methods that are supported by Internet Explorer, Firefox, Safari or Opera | |
|
.jscript_prop a:link .jscript_prop a:visited .jscript_prop a:active .jscript_prop a:hover |
no no no yes |
property link | properties of objects that are supported by Internet Explorer, Firefox, Safari or Opera | |
|
.jscript_method a:link .jscript_method a:visited .jscript_method a:active .jscript_method a:hover |
no no no yes |
method link | methods of objects that are supported by Internet Explorer, Firefox, Safari or Opera |
More On Customization
|
|
|