Easy Syntax highlighting using Enlighter JS

posted in: Javascript | 0

EnlighterJS is a free, easy-to-use, syntax highlighting plugin developed for MooTools. Using it can be as simple as adding a single script and style to your website, choosing the elements you wish to highlight, and EnlighterJS takes care of the rest!

It supports syntax highlighting to number of languages and scripts. It can be added easily with adding data-enlighter-language attribute to the <pre> element in your html page.

Download Enlighter JS using their following github page. https://github.com/EnlighterJS/EnlighterJS

To integrate in your webpage link the Enligher JS css and Js files. Also link the mootools Js file too.

<link type="text/css" href="css/EnlighterJS.css" rel="stylesheet">
<script src="js/MooTools-Core-1.6.0.js" type="text/javascript"></script>
<script src="js/EnlighterJS.js" type="text/javascript"></script>

 

Initialize the Englihter JS with a meta tag

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

Prepare your sourcecode by giving the element (containing the code) an optional data-enlighter-language attribute with the language of the snippet.

<h3>PHP code</h3>
    <pre data-enlighter-language="php">
        $a = 4;
        $b = 5;
        $c = $a + $b;
        print $c;
    </pre>
<h3>CSS code</h3>
  <pre data-enlighter-language="css">
    .myclass{
        color: #FFFFFF;
        padding: 0 10px 20px 0;
        margin: 10px 20px 5px 10px;
        background: #AFAFAF;
    }
</pre>

This will render the source code in with syntax highlighting in the web page

Visit the EnlighterJS home page for more information.

Leave a Reply