highlight.js: description

Installation and usage

The script is installed by linking to a single file and making a single initialization call:

<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad();
</script>

Autodetection can work a bit slow if it includes too many languages and code blocks are large. To speed up highlighting in this case you can pass to the initialization function only those languages that you actually use on your pages:

<script type="text/javascript">
  hljs.initHighlightingOnLoad('html', 'css');
</script>

When called this way highlight.js will dynamically load appropriate language files and thus will also weigh less than with the default set that includes many popular languages. This explicit passing of languages is also required if you need a language that is not included in the default set (see DEFAULT_LANGUAGES in the file highlight.js).

A full list of classes is available in the included readme.eng.txt.

Then the script looks in your page for fragments <pre><code>...</code></pre> that are used traditionally to mark up code examples. Their content is marked up by logical pieces with defined class names. The classes are used to actually style the code elements:

.comment {
  color: gray;
}

.keyword {
  font-weight: bold;
}

.python .string {
  color: blue;
}

.html .atribute .value {
  color: green;
}

Highligt.js comes with several style themes located in "styles" directory that can be used directly or as a base for your own experiments.

WordPress plugin

Generally installing highlight.js in a WordPress blog is no different than for any other web page. However it can also be installed as a plugin. This is useful if your blog is located on a shared hosting and you don't have a permission to edit template and style files. Or it may be more convenient to you this way.

To install the plugin copy the whole directory with highlight.js to the WordPress plugins directory. After this you can activate and deactivate it from the Plugins panel. There is also a page "highlight.js" under the Options menu where you can set a list of languages and style rules. Insanely convenient :-)

Export

File export.html contains a little program that shows and allows to copy and paste an HTML code generated by the highlighter for any code snippet. This can be useful in situations when one can't use the script itself on a site.

Heuristics

Autodetection of a code's language is done with a simple heuristics: the program tries to highlight a fragment with all available languages and counts all syntactic structures that it finds along the way. The language with greatest count wins.

This means that in short fragments the probability of an error is high (and it really happens sometimes). In this cases you can set the fragment's language explicitly by assigning a class to the <code> element:

<pre><code class="html">...</code></pre>

To disable highlighting of a fragment altogether use "no-highlight" class:

<pre><code class="no-highlight">...</code></pre>