Docs & Faqs - Syntax Highlighter

CSS 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
Properties and values
Selectors and pseudos
At-rules
Help links

General language items:

Sample code:

body {
    /* some valid code */
    margin:10px 20px 10px 30px;
    color:#323232;
}
    //invalid_code

Classes:

Class name	Description	Applies to
css_def	default	base language elements: - whitespaces outside style declarations - { and } - : and ;
css_com	comment	comments
css_invalid	invalid code	syntactically incorrect items.

Properties and values:

Sample code:

.class_1 {
    color:#f0f0f0;
    /* unknown property */
    textcolor:#f0f0f0;
}

.class_2 {
    color:#f0f0f0;
    /* unknown property value */
    color:near-black;
}

Classes:

Class name	Description	Applies to
css_prop	known property	properties that are supported by Internet Explorer, Firefox, Safari or Opera
css_prop_unknown	unknown property	properties that are not supported by any of Internet Explorer, Firefox, Safari and Opera
css_propvalue	known property value	property values that are supported by Internet Explorer, Firefox, Safari or Opera
css_propvalue_unknown	unknown property value	property values that are not supported by any of Internet Explorer, Firefox, Safari and Opera

Selectors and pseudos:

Sample code:

/* id selector */
#id {
    padding-left:30px;
}

/* class selector */
.className {
    background-color:#ffffff;
}

/* type selector */
body {
    margin:0px;
    color:#323232;
}

/* unknown type selector */
body {
    margin:0px;
    color:#323232;
}

/* CSS attribute */
#id [attr=value] {
    margin-right:10px;
}

/* pseudo */
.class:hover {
    color:#fff;
}

/* unknown pseudo */
.class:mypseudo {
    color:#fff;
}

Classes:

Class name	Description	Applies to
css_id	ID selector	ID selectors
css_class	class selector	class selectors
css_type	known type selector	type selectors that are supported by Internet Explorer, Firefox, Safari or Opera
css_type_unknown	unknown type selector	type selectors that are not supported by any of Internet Explorer, Firefox, Safari and Opera
css_attr	attribute selector	attribute selectors
css_pseudo	known pseudo	pseudo classes and elements that are supported by Internet Explorer, Firefox, Safari or Opera
css_pseudo_unknown	unknown pseudos	pseudo classes and elements that are not supported by any of Internet Explorer, Firefox, Safari and Opera

At-rules:

Sample code:

/* at-rule */
@import "style.css";

/* unknown at-rule */
@my-rule "style.css";

/* known and unknown media types */
@media print myMedia {
    body {
        color:#fff;
    }
}

/* page selector */
@page example {
    margin: 3cm;
}

/* at-rule value */
@import url("style.css");

/* unknown at-rule value */
@import src("style.css");

Classes:

Class name	Description	Applies to
css_atrule	known at-rule	at-rules that are supported by Internet Explorer, Firefox, Safari or Opera
css_atrule_unknown	unknown at-rule	at-rules that are not supported by any of Internet Explorer, Firefox, Safari and Opera
css_atrule_media	known media type	media types that are supported by Internet Explorer, Firefox, Safari or Opera (such as print)
css_atrule_media_unknown	unknown media type	media types that are not supported by any of Internet Explorer, Firefox, Safari and Opera
css_atrule_pageselector	page selector	page selectors
css_atrule_value	known at-rule value	at-rule values that are supported by Internet Explorer, Firefox, Safari or Opera
css_atrule_value_unknown	unknown at-rule value	at-rule values that are not supported by any of Internet Explorer, Firefox, Safari and Opera

Help links

The following style declarations have effect only if the highlighted code contains help links.

Sample code:

/* at-rule link */
@import "style.css";

/* pseudo link */
.class :hover {
    /* property link */
    color:#444;
}

Classes:

Class name	Underlined	Description	Applies to
.css_atrule a:link .css_atrule a:visited .css_atrule a:active .css_atrule a:hover	no no no yes	at-rule link	knwon at-rules
.css_pseudo a:link .css_pseudo a:visited .css_pseudo a:active .css_pseudo a:hover	no no no yes	pseudo link	known pseudos
.css_prop a:link .css_prop a:visited .css_prop a:active .css_prop a:hover	no no no yes	property link	known properties

CSS code customization

General language items:

Sample code:

Classes:

Properties and values:

Sample code:

Classes:

Selectors and pseudos:

Sample code:

Classes:

At-rules:

Sample code:

Classes:

Help links

Sample code:

Classes:

More On Customization