Highlight Code with EnlighterJS for WordPress

Spread the love
(Last Updated On: February 26, 2022)


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:

Redources & CDN settings

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..


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">
...some js code..

Pretty straightforward isn’t it?



Team Cook

Bachelor in IT, father, Photograph, Communist slayer, I also build useful tools for my community and destroy repetitive tasks for the past 20 years. "Who controls the information, controls the future."

0 0 votes
Article Rating
Notify of

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x