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.
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.
- 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:
- 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 crambler.com:
and here it is:
let func = 123;
How to configure the code to be displayed
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):
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:
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?