Docs & Faqs - Syntax Highlighter

HTML 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
Tags
Properties and values
Links

General language items:

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Default class</title>
    </head>
    <body>
        <!-- Comment text -->
        <h1>Header</h1>
    </body>
<html>

Classes:

Class name	Description	Applies to
html_def	default	plain texts and whitespaces
html_com	comment	comments
html_doctype	doctype	!DOCTYPE elements

Tags:

Sample code:

<body>
    <!-- known tag -->
    <h1>Header</h1>

    <!-- unknown tag -->
    <mytag>custom tag</mytag>

    <!-- tag operators -->
    <a></a>
</body>

Classes:

Class name	Description	Applies to
html_tag	known tag	elements that are supported by Internet Explorer, Firefox, Safari or Opera
html_tag_unknown	unknown tag	elements that are not supported by any of Internet Explorer, Firefox, Safari and Opera
html_tagop	tag operator	tag operators: < and >

Properties and values:

Sample code:

<body>
    <!-- known attribute -->
    <div class="cont">container</div>

    <!-- unknown attribute -->
    <div myAttr="cont">container</div>

    <!-- known attribute value -->
    <div align="center">container</div>

    <!-- unknown attribute value -->
    <div align="tocenter">container</div>

    <!-- attribute operators -->
    <input type="text" size="10" />
</body>

Classes:

Class name	Description	Applies to
html_attr	known attribute	attributes that are supported by Internet Explorer, Firefox, Safari or Opera
html_attr_unknown	unknown attribute	attributes that are not supported by any of Internet Explorer, Firefox, Safari and Opera
html_attrvalue	known attribute values	attribute values are supported by Internet Explorer, Firefox, Safari or Opera
html_attrvalue_unknown	unknown attribute value	attribute values that are not supported by any of Internet Explorer, Firefox, Safari and Opera
html_attrop	attribute value assign operator	attribute value assign operators (= signs)

Links

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

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" >
<body>
    <div class="cont">container</div>
</body>

Classes:

Class name	Underlined	Description	Applies to
.html_doctype a:link .html_doctype a:visited .html_doctype a:active .html_doctype a:hover	no no no yes	doctype link	!DOCTYPE elements
.html_tag a:link .html_tag a:visited .html_tag a:active .html_tag a:hover	no no no yes	tag link	known elements
.html_attr a:link .html_attr a:visited .html_attr a:active .html_attr a:hover	no no no yes	attribute link	known attributes

HTML code customization

General language items:

Sample code:

Classes:

Tags:

Sample code:

Classes:

Properties and values:

Sample code:

Classes:

Links

Sample code:

Classes:

More On Customization