WordPress powers a lot of sites that provide excellent coding tutorials. If you own a similar website and would like to add syntax highlighting to your code blocks, you can use HighlightJS for the same.
What is Highlight.js?
Highlight.js is a simple Javascript library that allows you to highlight the syntax of your code blocks effortlessly. It auto-detects the most popular programming languages and has zero dependencies on any other external libraries.
How to add Highlight.js to WordPress?
Adding Highlight.js to your WordPress website couldn’t be any easier. We just need to add a few lines of code to make it work. Also, you don’t need to make changes to any of your theme files at all. We’ll be inserting the required code using a free plugin called WPCode by WPBeginner. This plugin was earlier called Insert Headers & Footers.
There are two ways to add Highlight.js to your WordPress website. One is to import the library from CDN and the other is loading the library locally on your web server. For easier implementation, we’ll be using the CDN method in this tutorial.
Add Highlight.js to WordPress by importing it from CDN
After you’ve installed and activated the plugin, go to the Headers & Footers section. In the Header section, enter the following lines and save the changes.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>Be sure to update the version of Highlight.js from their official site here.
You’ll notice that I’ve used the Atom One Light theme for my syntax highlighting. Highlight.js has a ton of different styles to choose from. You can browse them here.
Once you’ve found a style you like, choose the appropriate stylesheet URL from this page and replace the stylesheet URL in the code above with your chosen URL.
After following the steps above, you’ve successfully imported the Highlight.js library into your WordPress website. The next step is to load it on our website’s front end so that the library can highlight the syntax of our code blocks automatically.
We’ll be using the WPCode plugin for this step as well. Go to the Headers & Footers section of the plugin again and insert the following line into the Footer section and save your changes.
<script>hljs.highlightAll();</script>That’s it. Highlight.js will now highlight the syntax of all your Gutenberg code blocks automatically. It will auto-detect the programming language of your code.
Bonus Tips:
After syntax highlighting is enabled on your site, you’ll notice that your code blocks look a little out of place. Highlight.js adds its own styles to the layout of the WordPress code block.
For example, our code blocks looked something like this when we used the StackOverflow Light theme from Highlight.js.
There was another square block inside our code block with a different color. This doesn’t look uniform. There’s a simple solution to fix this.
We’ve used the Atom One Light theme for syntax highlighting all the code blocks on our site. Hence, we’ll be using it as an example to show you the solution.
In your WordPress Admin Dashboard, go to Appearance and click on Customize.
Go to the Additional CSS section and enter the following lines of code:
/* Code Block Customization */
pre.wp-block-code {
background-color: #FAFAFA;
padding: 8px;
border-radius: 0px 10px 0px 10px;
font-size: 14px;
}The background color is the color of the internal square box that appears inside your code block after enabling syntax highlighting. You can use a color picker tool to find out that color.
The padding property adds spacing around the internal square box to make it look neater.
The border-radius property adds rounded corners to your WordPress code block. We only use a rounded corner on the top-right and bottom-left corners of our code blocks hence, the other two values are set to 0px.
The font-size property lets you set the size of the fonts in your code blocks.
Additionally, you can also use a plugin like Copy to Clipboard to add a COPY button to your code block.
