HTML - Syntax Highlighter

HTML Syntax Highlighter

Do you want to put some well-colored source code on your site, blog or forum? Perhaps you have tried some syntax highlighter before and you weren't satisfied? Then give our services a try!

What the HTML highlighter provides:

	The HTML syntax highlighter recognizes the embedded CSS and JavaScript code blocks, furthermore the Internet Explorer specific XML data islands and colors them the same as the corresponding language specific highlighter. Use the 'Generate Sample Code' button below to try it.
	The HTML syntax highlighter recognizes the embedded CSS and JavaScript code blocks, furthermore the Internet Explorer specific XML data islands and colors them the same as the corresponding language specific highlighter. Use the 'Generate Sample Code' button below to try it.
	You can choose whether to add line numbers to the highlighted code. Line numbers make it easier to refer to a line in the description, but they increase the size of the highlighted code. For large codes, you can decrease the size of the highlighted code with compression (see below).
	The syntax highlighter allows you to create three different buttons that help your visitors to copy or print the source code. You can enable or disable these footer buttons, as well as change their labels. Note: the dottoro-highlighter-v4.js file must be included in every page where you use footer buttons.
	Tab characters may optionally be replaced by spaces. If tab replacement is enabled, you may specify the number of spaces for tab characters to control the width of the indent to be used.
	The syntax highlighter makes a difference between known, unknown and invalid language elements, and appends different style classes to them. A language element is known if it is supported by Internet Explorer, Firefox, Safari or Opera.
	Since the size of the highlighted code can be much more larger than the original source code, the highlighter provides a compression mechanism. The compressed code is optimized for search engines, so your code appears in search engines result pages (SERPs) in its original form. Benefits: - the generated HTML code is smaller - your pages load faster Drawbacks: - JavaScript must be enabled in your visitors's browser - the dottoro-highlighter-v4.js file must be included in every page where you use compressed highlighted code.
	With the help links option you can make it easy for your visitors to get more information about the HTML language elements used in your source code. The generated links point to the corresponding pages in the Dottoro HTML reference.
	Finally, the syntax highlighter service is available through a SOAP interface. If you want to use this service programmatically, not manually, (e.g. for your forum), you can do it. For further details, please see the Service Keys page.

!	You must enable JavaScript in your browser to use this service!

Please choose your options first, then click on the Highlight button below.
Note: your settings are saved if you are logged in.

Line numbers

Replace tabs with spaces

Tab and indent size(1-20):

View Plain button

Title of the button:

Copy to Clipboard button

Title of the button:

Print button

Title of the button:

Help links

Nofollow links

Compress source code

Insert your HTML source code into this field, or use the following button:

The result:

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

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.

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.

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.

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 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 visit the Customization page.

Digg

Del.icio.us

Facebook

Twitter

Diigo

More...

Introduction

Customization

Themes

Plugins

Service Keys

News

Faq

Reported Bugs