How To Add Highlight Syntax Code And Style The Code Block Element In WordPress (No Plugins Required)

Written by
Fabrizio Van Marciano
Posted on
October 21, 2021

In this video, we're going to style the PRE code block element inside of WordPress, as well as implement highlight syntax code without using any plugins. Let's dive right in!

Plugins are great for adding functionality to your WordPress website. Sometimes, however, there might not be a suitable plugin available for what you want to achieve. Or, you may simply not want to add yet another plugin to your website.

The code block element in WordPress is something I use frequently to share code snippets with my readers. Especially in tutorials like this one.

The default code block in WordPress, however, is pretty dull and boring. But we're going to change that in this simple tutorial. Let's get started.

If you wish to watch the tutorial video below, feel free to do so. You can also follow the written instructions below the video.

First of all, make sure you're logged into your WordPress website. If you're using a theme builder like Oxygen Builder, you might want to install the Insert Headers and Footers plugin as we're going to need to implement some code into the header.

Step One: Add The Prettify Script To Your Document

The first step is to head over to Git and copy the script tag which you will find under the heading Setup. You will also find a host of information and resources for Prettify here. Here is a screenshot of the page section...

Now head over to your WordPress website and paste the tag script in the <head> section of your document.

Once again, with WordPress, the easiest way to do this is if your theme doesn't include a script manager, is to install the 'Insert Headers And Footers' plugin mentioned above. This plugin has over 1 million installs and is regularly updated, so you should be in good hands.

Again, you want to paste the script in the <head> header section and then hit Save. See the image below.

style the code block element

Step Two: Add Classes To Your Code Block Element

The next step is something you're going to have to remember to do each time you use the code block element in WordPress. Yes, I know this is a pain in the backside, however, there is a clever little trick which I'll explain later.

In your post editor, drop the Code block element. Then click on the Options tab for that element and select Edit as HTML. See the image below.

You should see the following line of code right at the top:

<pre class="wp-block-code"><code></code></pre>

Just after the wp-block-code class and keeping inside the quotes, you will want to add the following classes:

"prettyprint linenums"

It should look like this afterward:

Here's the clever trick I mentioned earlier... If you click on the Options tab for the code block element again (three little dots), you can select Add to Reusable blocks. Give it a name and you'll be able to use it again in the future without having to keep adding the classes. See the image below.

Now, be sure to click Update on the block and then go back to Options on the element itself, and select edit visually. You can now add whatever code you want to share in your post. See the image below.

Step Three: Style With CSS

If you preview your post, you will notice the code area of your post looks different with highlighted syntax and numbered list. However, it's still boring, so we'll need to add some cool CSS.

From your WP dashboard, go to Appearance > Customize and select the Additional CSS option in the left-hand tab. Here you can add some CSS to style the code PRE selector.

If like me, you're using Oxygen Builder, then simply navigate to the stylesheet you created for your website. Here is the CSS code you need to add. If you know a little bit of CSS, feel free to modify it in any way to suit the style you are looking for.

pre.prettyprint {
	background: #f1f1f1 !important;
	border: none;
	padding: 30px;
	border-radius: 5px;
}

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
  	list-style-type: decimal;
}

pre.prettyprint.linenums {
    background: #f0f3f6 !important;
}

Don't forget to hit save, clear your website cache if you have to, and take a look at the front end to see what your code block looks like.

If you're happy with it, awesome. If not, keep tinkering. Once again, the video tutorial above provides thorough guidance into customizing the code block element.

Hope you enjoyed this tutorial, see you next time.

Recommended CSS tutorials

  1. Fancy Hyperlinks Hover Effects CSS Tutorial
  2. Custom Numbered List CSS Tutorial
Posted in ,

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.

WordPress + Oxygen Builder Web Design Video Courses Coming Soon!

Copy link