Creating a WordPress Subtheme and Code Highlighting

Code highlighting is not a standard feature on WordPress. This is understandable since most WP users don’t need this option –  and even those who do, have different preferences about the way they want to display their code.

Note: The following procedure works only if you are self-hosting your WordPress blog.

After looking around I’ve decided to use Prismjs, which is very lightweight and easy to install once you become familiar with the procedure.

To use Prismjs I had to customize my theme by adding a style-sheet and a JavaScript file to it.

When customizing theme-files, it is advisable to create a sub-theme, which is also known as a theme child on WordPress lingo. This is because any code customization performed in the original theme will be lost the next time the original theme is upgraded and that can happen automatically.  Fortunately, this procedure is easier to do than what it sounds.

  1. Following the instructions from the URL given below, I created a theme-child instance in a matter of minutes (thanks Nick):

Later, if you want to know more about this topic, WordPress has a nice section about sub themes:

  1. Once I had a child theme instantiated and properly working, the next step was to download Prismjs from source:

For that, I followed the easy instructions given on

and here it is:

 let func = 123; 

How to configure the code to be displayed

To properly configure your code highlighting for a specific post, you need to declare the language your syntax intends to represent, like for example, JavaScript. This must be one of the languages you had selected before downloading the files.

Here’s how I did it for the example shown before (small screen users, please slide the code-window  horizontally to see the whole script):

<pre><code class="language-javascript.line-numbers"> 
let func = 123; 

Above, there are two classes connected together. The line-numbers class does not have to be there unless you want line numbers.

Speaking of line-numbers, you can use the data-start=”number” attribute to start your line on a number other than 1. See below:

<pre data-start="3"><code class="language-javascript.line-numbers"> 
let func = 123; 

Wrapping up

Well, I hope this little adventure comes handy for someone out there. I was an avid user of WordPress in the early days but it has been more than a decade since my last installation. Most of my early projects were done with Drupal 7. So much has changed since then. WordPress is now a force to be reckoned with.

How do you currently highlight syntax in your blog?


Tony De Araujo

One Reply to “Creating a WordPress Subtheme and Code Highlighting”

Leave a Reply

Your email address will not be published. Required fields are marked *