Docs & Faqs - Syntax Highlighter

Introduction

Our highlighters create an HTML formatted text from your source code that you can be published to your site without high-level programming skills. They 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.

If you want to put highlighted code on your site, first you need to select the corresponding highlighter for your source code. It will create the colored code that you can insert into the source of your site. Some additional files also need to be imported into your site.

If you have permission to upload files to your server, then save the following files to your local computer and upload them to your server:

dottoro-highlighter-v4.css	Size: 10461 bytes
dottoro-highlighter-v4.js	Size: 10043 bytes

or use compressed files instead (they are smaller, but do not contain comments and unnecessary whitespaces so they are hardly readable):

dottoro-highlighter-v4-min.css	Size: 9191 bytes
dottoro-highlighter-v4-min.js	Size: 6551 bytes

After that, insert the following lines into the head section of your page that you want to use the highlighted code on:

(These lines need to be inserted only once; if you use more than one highlighted code on the same page, you don't need to insert them again.)

<link rel="stylesheet" type="text/css" href="PATH_ON_YOUR_SERVER1/dottoro-highlighter-v4.css" />
<script type="text/javascript" src="PATH_ON_YOUR_SERVER2/dottoro-highlighter-v4.js"></script>

where the PATH_ON_YOUR_SERVER1 and PATH_ON_YOUR_SERVER2 are the path to the dottoro-highlighter-v4.css and dottoro-highlighter-v4.js files on your server.

If you have no permission to upload files to your server, then include the files directly from our server:

<link rel="stylesheet" type="text/css"
    href="http://tools.dottoro.com/public/highlighter/dottoro-highlighter-v4.css" />
<script type="text/javascript" 
    src="http://tools.dottoro.com/public/highlighter/dottoro-highlighter-v4.js"></script>

Please choose this solution only if you have no permission to upload.

The drawbacks of this solution are that

it increases our server traffic and
if our server is temporary unavailable, your site will not be able to access the required files. In that case, the footer buttons do not work and compressed codes appear as a plain text without any formatting.

Note that the dottoro-highlighter-v4.js file is only needed to decompress the source code and for the footer buttons. If you do not use compressed code and footer buttons, it need not be included. For further details about compressed code and footer buttons, please see any of our highlighters pages.

The dottoro-highlighter-v4.css file contains the default style settings for the highlighted code and its container frame. It contains several style declarations that allow easy and flexible modification of the appearance of the highlighted code and its frame. 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.

For further details about customization, please see the Customization page.

The dottoro-highlighter-v4.css file contains only those style settings that are certainly necessary. If your page contains style declarations that affect all instances of a tag (for example 'div {border: 1px solid red}' affects all division instances), the highlighted code may appear imperfectly on your site. For example, several WordPress themes specify style settings for tags.

For those cases, please use the dottoro-highlighter-ex-v4.css and dottoro-highlighter-ex-v4-min.css files instead of the dottoro-highlighter-v4.css and dottoro-highlighter-v4-min.css files. Hopefully, that will solve the problem.

If you want to put the highlighted code on a WordPress blog, we suggest that you use our WordPress plugin. It provides a really handy way of syntax highlighting.

Our highlighter services can also be accessed through SOAP. It is useful if you want color your source code programmatically, e.g. for your forum. In that case, you will first need a service key. A service key allows you to use our services, it identifies a communication process, so we can give you statistics about your activities based on your service keys. For further details, please see the Service Keys page.

Introduction

Customization

Themes

Plugins

Service Keys

News

Faq

Reported Bugs