WordPress default code block sucks. If you want to display your code professionally, you do need a plugin.

In this post, I will show you four different code-highlighter plugins that you can use on your WordPress website. However, my top pick is Highlighting Code Block. You can definitely use this plugin without any trouble.

How to use Highlighting Code Block plugin to display raw code:

Login to your WordPress dashboard, navigate to “Plugins » Add New”, install & activate the “Highlighting Code Block” plugin.

Install Highlighting Code Block Plugin
Install Highlighting Code Block WordPress Plugin

You can do but there are no additional settings are required in order to make this plugin work. Just activate it and you’re ready to display raw code on your WordPress website.

Go to any of your posts or pages, and now you will see a new “Block” called “Highlighting Code Block”. Insert this block where you need to display code.

Highlighting Code Block

And paste your code into the new block. You will find a dropdown underneath and choose the (code/programming) language you pasted. In my case, it’s PHP. And hit publish/update your post/page. That’s it!

language dropdown
Code/Programming Language Dropdown

It has a different syntax highlighter for different types of programming languages/code: HTML, CSS, SCSS, JavaScript, Ruby, etc.

If you want to customize the look & feel of the syntax highlighter, navigate to “Settings » [HCB Settings]”. You can choose light or dark mood both for front & back-end, change the font & size, etc.

The code will look like the first image of this post.

Leave a Reply

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