Docs & Faqs - Syntax Highlighter

Themes - Examples of Customization

Our syntax highlighters attach several style classes to the elements in the result code to give you the ability to customize the appearance of the highlighted code as flexibly as possible.

The default settings for the attached CSS classes are specified in the dottoro-highlighter-v4.css file. If you want to use custom style definitions on your site, import the default style settings first (dottoro-highlighter-v4.css) and specify your style settings after:

<link rel="stylesheet" type="text/css"href="..../dottoro-highlighter-v4.css" />
<style>
    Your style declarations
</style>

If you need more information about how you can import the dottoro-highlighter-v4.css file into your site, please see the Introduction page.

In the followings, you can found several examples of customization. This page does not contain information about the structure of the highlighted code and descriptions about the attached style classes. If you want to read about them, please see the Customization page.

How to modify the size of the highlighted code
How to modify the padding of the highlighted code
Code themes
Frame themes
How to use different themes on the same page

How to modify the size of the highlighted code:

If you want to modify the size of the highlighted code, specify the width and/or height of the code container element.

If there is more than one highlighted code on the same page and you want to specify different widths for them, use inline style settings:

Change this line:

<div class="dr_hl_codeContainer">

to:

<div class="dr_hl_codeContainer" style="width:400px;">

If you want to specify the same width for all highlighted code, use the dr_hl_codeContainer class:

.dr_hl_codeContainer {
    width: 400px;
}

Effect:

Original look:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <style>
         .body {
              color: red;
         }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

View Plain

Copy to Clipboard

D.r™

New look:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <style>
         .body {
             color: red;
         }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

View Plain

Copy to Clipboard

D.r™

How to modify the padding of the highlighted code:

For code without line numbers:

.dr_hl_noLineNumbers .dr_hl_codeContainer {
    padding: 20px 30px 30px 20px;
}

For code with line numbers:

.dr_hl_lineNumbersCell {
    padding-left:8px;
    padding-right:6px;
}

.dr_hl_lineNumberedCodeCell {
    padding-left:20px;
    padding-right:20px;
}
.dr_hl_lineNumbersCell, .dr_hl_lineNumberedCodeCell {
    padding-top: 20px;
    padding-bottom: 20px;
}

Effect:

For code without line numbers:

Original look:

<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

New look:

<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

For code with line numbers:

Original look:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

New look:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

Code themes:

default

Sample code:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
    <script>
        function Init () {
            alert ('Hi');
        }
    </script>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

black

Sample code:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
    <script>
        function Init () {
            alert ('Hi');
        }
    </script>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

Styles:

.dr_hl_codeContainer {
    background-color:#000000;
    color:#ffffff;
}

/* For codes with line numbers */
.dr_hl_lineNumbersCell {background-color:#323232;}

squared

Sample code - with line numbers:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
    <script>
        function Init () {
            alert ('Hi');
        }
    </script>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

Styles:

.dr_hl_codeContainer {
    background:transparent url(squared.gif);
}
.dr_hl_lineNumbersCell {background-color:#e2e7ea;}

You can download the squared.gif background image from here.

streaked

Sample code - with line numbers:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
    <style>
        .body {
            color: red;
        }
    </style>
    <script>
        function Init () {
            alert ('Hi');
        }
    </script>
</head>
<body onload="Init ();">
    <!-- Sample HTML file -->
</body>
<html>

Styles:

.dr_hl_codeContainer {
    background: transparent url(streaked.gif);
}
.dr_hl_lineNumbersCell {background-color:#e5e9eb;}

You can download the streaked.gif background image from here.

Frame themes:

default

Sample code:

View Plain

Copy to Clipboard

D.r™

black

Sample code:

View Plain

Copy to Clipboard

D.r™

Styles:

.dr_hl_footer {
    background-color:#000000;
}
.dr_hl_viewPlainCell, 
.dr_hl_copyCell, 
.dr_hl_printCell {
    background-color:#323232;
    border:1px solid #555555;
    color:#acacac;
    cursor:pointer;
}
.dr_hl_trademarkCell a:link {color:#747474; text-decoration:none;}
.dr_hl_trademarkCell a:visited {color:#747474; text-decoration:none;}
.dr_hl_trademarkCell a:active {color:#747474;}

elegant

Sample code:

View Plain

Copy to Clipboard

D.r™

Styles:

.dr_hl_footer {
    background-color:#ece5d2;
}
.dr_hl_viewPlainCell, 
.dr_hl_copyCell, 
.dr_hl_printCell {
    background-color:#ebebeb;
    border:1px solid #a0b1b9;
    color:#363636;
    cursor:pointer;
}

pure

Sample code:

View Plain

Copy to Clipboard

D.r™

Styles:

.dr_hl_footer {
    background-color:transparent;
    border:none;
}
.dr_hl_viewPlainCell, 
.dr_hl_copyCell, 
.dr_hl_printCell {
    background-color:#ebebeb;
    border:1px solid #a0b1b9;
    color:#363636;
    cursor:pointer;
}

green

Sample code:

View Plain

Copy to Clipboard

D.r™

Styles:

.dr_hl_footer {
    background-color:#98ac18;
    border-color:#839418;
}
.dr_hl_viewPlainCell, 
.dr_hl_copyCell, 
.dr_hl_printCell {
    background-color:#e8e8e8;
    border:1px solid #8f9e2f;
    color:#323232;
    cursor:pointer;
}
.dr_hl_trademarkCell {color:#efefef;}
.dr_hl_trademarkCell a:link {color:#efefef; text-decoration:none;}
.dr_hl_trademarkCell a:visited {color:#efefef; text-decoration:none;}
.dr_hl_trademarkCell a:active {color:#efefef;}

How to use different themes on the same page:

For example, if you want to use the black and squared themes on the same page, specify the following style classes:

.dottoro_highlight_black .dr_hl_codeContainer {
    background-color:#000000;
    color:#ffffff;
}

.dottoro_highlight_black .dr_hl_lineNumbersCell {
    background-color:#323232;
}

.dottoro_highlight_squared .dr_hl_codeContainer {
    background: transparent url(/public/highlighter/squared.gif);
}
.dottoro_highlight_squared .dr_hl_lineNumbersCell {
    background-color:#e2e7ea;
}

and attach the dottoro_highlight_black and dottoro_highlight_squared classes to the required main container elements:

<div class="dottoro_highlight dottoro_highlight_black">
...
<div class="dottoro_highlight dottoro_highlight_squared">

Introduction

Customization

Themes

Plugins

Service Keys

News

Faq

Reported Bugs