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">
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">
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 all
languages implemented.
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;
}
You can use included sample.css as a starting point for you own style.
A full list of classes is available in the included readme.eng.txt.
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>
