highlight.js: description

Installation and usage

Downloaded package includes file "highlight.pack.js" which is a full compressed version of the library intended to use in production. All uncompressed source files are also available, feel free to look into them!

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

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

Also you can replaces TAB ('\x09') characters used for indentation in your code with some fixed number of spaces or with a <span> to set them special styling:

<script type="text/javascript">
  hljs.tabReplace = '    '; // 4 spaces
  // ... or
  hljs.tabReplace = '<span class="indent">\t</span>';

  hljs.initHighlightingOnLoad();
</script>

Despite highlight.pack.js already includes only those languages that you need sometimes you may want to further constrain a set of languages used on a page by listing them as parameters to initialization:

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

A full list of available classes is below ("Languages").

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>

You can use class names recommended in HTML5: "language-html", "language-php". Classes also can be assigned to the <pre> element.

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

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