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

</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:

EnlighterJS.zip

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?

 

 

Team Cook

Self-taught IT guy, and Communist slayer for the past 40 years. Who controls the information, controls the future.

0 0 votes
Article Rating
Subscribe
Notify of
guest

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