Docs & Faqs - Syntax Highlighter

Customization

When you use any of our syntax highlighters to color your source code, it creates a HTML formatted text for you. The resulting text contains the highlighted source code, the optionally selectable footer buttons, the trademark and frame elements that contains them. The highlighters attach several CSS classes to the frame elements and the language items in the highlighted code to allow flexible customization.

In the followings, we introduce the structure of the highlighted code and the attached CSS classes. If you need examples of customization, please see the Themes page.

Structure:

The HTML source code created by our syntax highlighters has the following structure:

Attached CSS classes:

The default settings for the attached CSS classes can be found in the dottoro-highlighter-v4.css file.
The following table contains the CSS classes attached to the frame elements, footer buttons and the trademark:

Class name

Description

.dottoro_highlight

Attached to the main division element.

.dr_hl_lineNumbers

Attached to the main division element if the line numbers option is enabled.

.dr_hl_noLineNumbers

Attached to the main division element if the line numbers option is not enabled.

.dr_hl_container

Attached to the main table element.

.dr_hl_codeCell

Attached to the cell of the main table that contains the code container element.

.dr_hl_codeContainer

Attached to the code container element.

.dr_hl_lineNumbersCell

The highlighted code is always placed within a pre element. If the line numbers option is disabled, the parent of that pre element is the code container element, otherwise a table element is placed around the pre and within the code container element. The first cell of that table contains the line numbers, the second cell contains the highlighted code. This class is attached to the first cell.

.dr_hl_lineNumberedCodeCell

.dr_hl_footerCell

Attached to the cell of the main table that contains the footer table element.

.dr_hl_footer

Attached to the footer table element.

.dr_hl_viewPlainCell

Attached to the footer cell that contains the 'View Plain' button.

.dr_hl_copyCell

Attached to the footer cell that contains the 'Copy to Clipboard' button.

.dr_hl_printCell

Attached to the footer cell that contains the 'Print' button.

.dr_hl_trademarkCell

Attached to the footer cell that contains the trademark.

.dr_hl_lang_css
.dr_hl_lang_html
.dr_hl_lang_jscript
.dr_hl_lang_xml

The highlighted code is always placed within a pre element. The syntax highlighters attach the corresponding class to that pre element. For example, the CSS highlighter attaches the dr_hl_lang_css class, the HTML highlighter attaches the dr_hl_lang_html class to that pre element. It helps you to make a difference between embedded and external style sheets. If you want to specify different settings for CSS language items that are embedded into HTML documents than for those that are located in CSS files, use the .dr_hl_lang_css and .dr_hl_lang_html prefices for your style declarations.
For example, if you want to set different colors for at-rules that are located in style sheets within HTML documents and at-rules that are located in CSS files, then:

.dr_hl_lang_css .css_atrule {
    color: blue;
}

.dr_hl_lang_html .css_atrule {
    color: red;
}

If you need information about the customization of the highlighted code, please see these pages:

You can override any of these style settings for your page, the only restriction is that the trademark must be left at the bottom-right corner of the highlighted code and it must be well readable.