Adding a Syntax Highlighter Shortcode Using Prism.js


This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

Syntax highlighting has become pretty standard on most tutorial sites (as you can see below) and there are many options available, all depending on what languages you use and how you want your code snippets to be displayed.

For the longest time I have been using Google's Prettify since it was easy to set up. The only real issue I had was that it didn't capture all the appropriate elements within my code and highlight them accordingly. I tried re-working it, but it wasn't the easiest code to navigate.

Thankfully I recently stumbled upon a new lightweight syntax highlighter by Lea Verou called Prism.js that offers the ability to expand upon the base HTML and CSS markup highlighting with some simple plugin hooks.

I took her core JavaScript code and added the option to include line numbering and PHP highlighting. I also modified a few of her base regex patterns to make her original highlight code capture a few more elements for each language.

Putting Together the Plugin

All we need to do to is add a shortcode function in WordPress so that we can easily include syntax highlighting to our code snippets using my modified Prism.js script. The easiest way to incorporate everything is to make it all into a plugin. Our finished plugin folder will look like this:

So let's start our plugin with the required fields:

The next thing we want to add is our actual shortcode hook and a pre-process fix to make sure it fires at the right time:

The sh_pre_process_shortcode() function is required so that our shortcode syntax is processed before all of the content filters start to clean up the text by default in WordPress. The helper function will filter our code and replace HTML entities with their appropriate entity value.

Enqueuing Scripts and Styles

In order for our plugin to work properly though, we also need to add in a few more functions to load up the CSS and JS files.

We need to enqueue our script and styles, but only if the shortcode has been used within our post content. Hence why we need that little conditional function to check is the shortcode is present.

The Quicktag

Adding a quicktag for our shortcode isn't very hard so we might as well do it:

This is all we need in our quicktag.js file:


For my syntax highlighting, I prefer a dark theme, so I created my highlights using the following CSS:

Using the Shortcode

The code shortcode for our syntax highlighter has three attributes: type, title and linenums.

type: there are four language types that works with our highlighter: markup, css, php, and javascript
title: you can include a title which will appear above the syntax highlighter box (optional)
linenums: add line numbers to your code, starting at whatever number you set (optional)

The only required attribute is "type", though it will default to "markup".


Putting together a plugin to give you the ability to use a syntax highlighter shortcode has a few steps, but thankfully you can always just download the plugin and install it without having to really know how it was put together. Though some of the fun in using WordPress is understanding how everything works so you can customize things to really get it working for you. That way, if you aren't a fan of my dark theme you can easily play around with the CSS to modify the styles of your syntax highlighter so that it matches your design.

If you have any comments or feedback on anything you read above, please feel free to discuss it below.