In this video, we’re going to style the PRE code block element inside of WordPress, as well as implement highlight 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. Let’s face it. Anything in WordPress that’s out of the box is pretty 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 or Bricks 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. This is a free plugin. Another plugin I would recommend checking out is WPCodeBox. This is a premium plugin, however, it comes with a lot of advanced features for adding all types of custom code to your site.
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 if your theme doesn’t include support for scripts 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.
💡 Important: Please use the script at your own risk as the resource has since been archived and is no longer maintained.
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
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 that I’ll explain later.
Tip: 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 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 a 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.
