Code snippets with Highlight.js + Clipboard.js

Introduction

Highlight.js

Highlight.js is an open-source syntax highlighting library used on a large number of websites on the internet. It’s primary function is to automatically classify the various parts of your code snippet to, well, highlight those elements in different colours. As of writing this post, Highlight.js supports 197 languages and has 246 styles (or themes).

Clipboard.js

Clipboard.js is a super light-weight, open-source library also used on a large number of websites on the internet. Clipboard.js enables you to either manually set a copy trigger and copy item or dynamically set this. In one of my previous posts, I showed how to use Clipboard.js using the manual target method. However, in this post, I will refer to the fully dynamic method as this is what will be preferred by most users.

Implementing these libraries into your WordPress site

Fortunately for you, I have put together, with credits to Sridhar Katakam, Highlight.js plugin and Clipboard.js plugins so you can literally install the plugins and have these features instantly. The plugins are not-bloated – this means the plugins will only enable the features of the library for you and nothing more!

For those of you who need a little more guidance on adding the plugins, here are the steps:

1. Download the Highlight.js plugin and the Clipboard.js plugin
2. Go to your WordPress dashboard > Plugins > Add New > Upload Plugin > Browse
3. Locate where you downloaded the plugins in the little window explorer and select whichever plugin you would like to add first (you can only add 1 plugin at a time) > Open
4. WordPress will do some magic and then ask you to activate plugin
5. Repeat above steps for the other library’s plugin

Simply add some preformatted code in a blog post, and specify the language class in the <pre> tag in the form “language-[TYPE]” (for example, language-css) and you should see the syntax highlighted and an automatically generated copy to clipboard button also. To change any of the stylings, use the sections below to help!

Customisations

Customising Highlight.js

You can customise the colour theme of Highlight.js by referring to their demo page. Once you have chosen a theme from the demo, you can get the corresponding CSS for the theme in the official GitHub page.

For those of you who need a little more guidance on updating the colour theme, here are the steps:

1. Once you have chosen a theme from the demo page, go to the official GitHub page and open the CSS file on the browser of the theme you have chosen – leave this as it is, do not do anything to this yet
2. Locate and edit the Highlight.js CSS file via your hosting provider or FTP – for me it is public_html > wp-content > plugins > highlight-js > assets > css > style.css > edit
3. Now copy the CSS from the GitHub page you had opened and paste this over the section commented in the plugin’s CSS file
4. Save and you are done!

You may not see the change take effect right away – do not worry, this is normal. Simply do a hard refresh (hold down Ctrl and press F5) and you should see the colours have changed.

You can of course manually change the colours of the various elements using the generated selectors.

Customising Clipboard.js

You can change the styles of the generated copy to clipboard button and tooltip by modifying the CSS in the following path: public_html > wp-content > plugins > clipboard-js > assets > css > style.css > edit

Alternative

An alternative to both of the aforementioned libraries is Prism.js. This is an awesome, light-weight, open-source library which is being used by big-named leaders in the development community such as Mozilla’s Developer Network (MDN)! You can do everything from adding syntax highlighting, to dynamic copy to clipboard buttons, tooltips, and much more using a single library! Prism.js is super powerful as you can add as many “plugins” (do not confuse this with WordPress plugins) to enable any additional features you require.

The reason I love Prism.js the most, and most probably why I will switch to it soon, is because Prism.js literally creates selector spans for every single part of your code snippet, including punctuations – go to the Mozilla’s Developer Network (MDN) website and inspect a code snippet – you will see what I mean!

I will soon be releasing a tutorial with a Prism.js plugin I have created to handle the syntax highlighting and eventually copy to clipboard functionality!