Highlighting libraries

MicroLight

A very lightweight implementation, consisting of just 1 css and 1 js file.

Simply include the css, link to the script, and assign the class attribute microlight to relevant content.

        <link rel="stylesheet" href="path/to/microlight.css">
        ...
        <anytag class="microlight">
          code to be hightlighted
        </anytag>
        ...
        <script src="path/to/microlight.js"></script>
    

HighlightJS

The bare minimum for using Highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:

<link rel="stylesheet" href="/path/to/styles/default.css">
...
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

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

The list of supported language classes is available in the class reference. Classes can also be prefixed with either language- or lang-.

To make arbitrary text look like code, but without highlighting, use the plaintext class:

<pre><code class="plaintext">
Plain text goes here. No highlighting should be applied but it should look like code in a way.
...
</code></pre>
    

To disable highlighting altogether use the nohighlight class:

<pre><code class="nohighlight">
Highlighting is disabled even though there is code here.
...
</code></pre>
    

EnLighter.js

Enlighter.js is one of those highlighters that also does line numbering. To use it, proceed as follows:

1. Optionally add a meta tag as shown below to set default values.
2. On the code that needs to be highlighted, set the data-enligher-language attribute to match the language in which the code is written.
3. Call the enlighter.js script.
4. Initialize the script, telling it which elements to act upon by means of a css selector, and passing additional settings as needed.

<meta name="EnlighterJS" content="Advanced javascript based syntax highlighting" data-indent="4"
    data-selector-block="pre" data-selector-inline="code" data-language="javascript" />

<link rel="stylesheet" href="./enlighter/enlighterjs.min.css" />
... 
<pre data-enlighter-language="javascript">
... 
Code to be highlighted goes here
... 	
</pre>
... 
<script type="text/javascript" src="./enlighter/enlighterjs.min.js"></script>
... 
<!-- Init Code -->
<script type="text/javascript">
    // - highlight the pre element with id enligher (CSS3 selectors)
    // - use javascript as default language
    // - use theme "enlighter" as default theme
    // - replace tabs with 2 spaces
    EnlighterJS.init('pre#enlighter', {
        language: 'html',
        theme: 'enlighter',
        indent: 2
    });
</script>

Prism

Prism.js consists of just 1 css and 1 js file.

1. Link the CSS file.
2. Call the script.
3. Assign the appropriate class names to relevant elements and presto!

<link href="themes/prism.css" rel="stylesheet" />
... 
<pre><code class="language-css">
... 
Code to be highlighted goes here
... 
p { color: red }
... 
</code></pre>
...
<script src="./path/to/prism.js"></script>

Using the data-src attribute you can even load source code from an external file!