by 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.
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.
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!
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.