How to use it?

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 dottoro-highlighter-v4-min.css Size: 9191 bytes dottoro-highlighter-v4-min.js Size: 6551 bytes (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. or use compressed files instead (they are smaller, but do not contain comments and unnecessary whitespaces so they are hardly readable):After that, insert the following lines into the head section of your page that you want to use the highlighted code on:

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.

When you are done, copy and paste the following text into the body section of your page where you want to place the highlighted code:

After insertion, the highlighted code will appear on your page.

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. Thefile 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.

Send bug report If you find another error related to the highlighted code (e.g. it appears imperfectly on your site), please use the If you think that our highlighter does not color your code perfectly, please help us to fix the bug by clicking on this button:If you find another error related to the highlighted code (e.g. it appears imperfectly on your site), please use the Reported bugs or the Contact Us form to get in touch with us.

How to customize the appearance of the highlighted code?

the trademark must be left at the bottom-right corner of the highlighted code and it must be well readable

Thefile 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

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