Getting Started

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!

Prepare your sourecode

Just add the data-enlighter-language attribute to specify the programming language.

<pre data-enlighter-language="js">
Element.implement({
...some js code..
});
</pre>

Roll the Drums..it will be magically transformed into

Highlighted Code

Element.implement({
    /**
     * Highlights an element/Removes Element highlighting
     *
     * @param {Object, Boolean} [options] EnlighterJS options Object or Boolean value to enable/disable highlighting
     * @returns {Element} The current Element instance.
     */
    enlight: function(options){
        // mixed input check - options available ?
        options = (typeof(options) == "undefined") ? {} : options;

        // convert "true" to empty Object!
        options = (options===true) ? {} : options;

        // enlighter instance already available ?
        var enlighter = this.retrieve('EnlighterInstance');

        // hide highlighted sourcecode ?
        if (options === false){
            if (enlighter !== null) {
                enlighter.enlight(false);
            }
        // highlight sourcecode and use options
        }else{
            // create new enlighter instance
            if (enlighter === null) {
                enlighter = new EJS(this, options, null);
                this.store('EnlighterInstance', enlighter);
            }
            enlighter.enlight(options);
        }

        // element instance
        return this;
    },
});

Get It!

EnlighterJS is available as source download including pre-build css + js files.

Install with Bower

You can also use Bower (linked to the GitHub repository) to get the wanted version.

$ bower install enlighterjs

Manual Installation

Or download the latest Release from GitHub and extract the files to your workspace.

EnlighterJS.zip EnlighterJS.tar.gz Custom Package

Integration

Three steps to success. EnlighterJS requires MooTools.Core >= 1.4.5.

1. Link the CSS + JS Files

Modify the paths to match your project settings.

<head>
...
<!-- Include EnlighterJS Styles -->
<link rel="stylesheet" type="text/css" href="css/EnlighterJS.min.css" />

<!-- Include MooTools Framework -->
<script type="text/javascript" src="js/MooTools-More-1.5.1-compressed.js"></script>

<!-- Include EnlighterJS -->
<script type="text/javascript" src="js/EnlighterJS.min.js" ></script>
...
</head>

2. Prepare your sourcecode

Starting with just a small piece of javascript code you wish to highlight. Prepare your sourcecode by giving the element (containing the code) an optional data-enlighter-language attribute with the language of the snippet.

<pre data-enlighter-language="js">
$('#loading-example-btn').click(function () {
	var btn = $(this)
	btn.button('loading')
	$.ajax(...).always(function () {
		btn.button('reset')
	});
});
</pre>

3. Initialize it!

The most simple and elegant way to use EnlighterJS on your page: just add a simple HTML-Meta-Tag to your page with the desired global config

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

Ready to use Examples

Your instantaneous launch into the world of EnlighterJS. For further information, please refer to the Documentation.

Example1 View file

Minimal

A minimalistic example how to use EnlighterJS on your page, using the Metainit initialization method. This will be the best choice for most users.

Example2 View file

Javascript based Initialization.

In some cases, it can be more effective using a javascript based initialization - e.g. use different configs for inline+block code.

Example3 View file

Advanced Usage

Some examples for special use-cases. Requires some deeper javascript knowledge.

WordPress Plugin

Enlighter - The most simple way to use EnlighterJS.
Full Visual-Editor-Integration. Build-in Theme Customizer.
Ready-to-use, Ready-to-post!

Enlighter WordPress Plugin

License FAQ

Simplification not legally binding

It requires you to

Keep the license and copyright notice included in the CSS and JavaScript files when you use them in your works
Included the FULL License in all copies or substantial portions of the Software

It forbids you to

Redistribute any piece of EnlighterJS without proper attribution
Hold the authors liable for damages as the Software is provided as is without warranty of any kind
Remove Copyright/License information's