log in / join
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 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 second cell.
.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.

Introduction
Customization
Themes
Plugins
Service Keys
News
Faq
Reported Bugs