Highlight Code with EnlighterJS for WordPress

Highlight Code with EnlighterJS for WordPress is pretty easy and the results are awesome. There are plenty of highlighter frameworks around for WordPress, such as Crayon.js and Highlighter.js, but I prefer this one.

It’s faster and lighter than Crayon while offering most of its options. Also I like the WordPress plugin integration better.

For WordPress

This is even easier! Just install their plugin: WP Enlighter

Then make sure to active it and select the CDN for the MooTools framework:

Code added with the add code button will look like this in your posts:

<pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;!--load EnlighterJS:--&gt;

...some js code..

</pre>

The ‘Copy to Clipboard’ button is a hack done with Clipboard.js, you can check how to add it to WordPress here.

For standalone sites

First you need to download the package. EnlighterJS css and JS are note currently available on cdnjs for some reason:

Then all you have to do is adding this code:

<!--load EnlighterJS:-->
<link rel='stylesheet' href='css/EnlighterJS.min.css' type='text/css' />
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js'></script>
<script type='text/javascript' src='js/EnlighterJS.min.js?ver=3.5'></script>

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

Pretty straightforward isn’t it?