How to show or display raw code on WordPress blog post in 2 easy steps

display raw code on WordPress

Those who want to create a code learning or technical WordPress websites will need to display code to the readers. It is easy to display raw code on WordPress blog posts. Raw code helps when users want to just copy and paste code in their respective places.

Publishers need to provide raw code to make life easier for users. For example, one may need to illustrate using code like how to add alt-image keywords in gravatars. The code needs to be placed on the WordPress functions.php file.

That code needs to be displayed so that users do not have to write the whole code but just copy and paste it.

How to display raw code in WordPress blog posts or articles? 

WordPress executes written content through multiple cleanup filters each time you save a post. This enables publishers to have an easy way to protect themselves through social engineering, phishing, malware injection or even SQL injection.

These filters assure that someone does not inject code via the post editor to hack your website. That is a security feature of WordPress. But how do make people learn through an open code display in WordPress?

Below is an easy and proper way to easily Display raw code on WordPress blog. There are many ways but will only show two major methods of doing the job. Enhance your coding website or your tutorial site with open code or raw code for the learners.

Method 1. Display raw Code on WordPress using WordPress Block Editor 

This method is advised for people who are new to the practice and users who don’t need to display code very often. It’s the easiest way with adding a bunch of code to their website. This method is for the novice and they do not show raw code on every post on the website.

Each page has blocks if using the Gutenberg editor in WordPress. Those using other page editors have also different means of adding the blocks in their respective builders.

Simply edit the blog post or page where you want to display the code. On the post edit screen, add a new code block to your post.  That is just simply how to display raw code on a WordPress site.

display raw code on WordPress step by step
add code block

Method 2. Display raw code on WordPress using Plugin

You only need to install and activate the SyntaxHighlighter Evolved plugin. Then you can get the block for that purpose. Follow the plugin settings and that is it. That’s how to display raw code on WordPress using a plugin.

Using plugins is often easier for experienced users, however, the novice can learn and use it within minutes. Using the plugin to Display raw code on WordPress is recommended for those with few plugins on their WordPress website.


The methods highlighted above are both good. However, using a plugin is not recommended because it adds more code to your code website.

For WordPress to function with ease, managing plugins is critical. The first method uses code blocks available by default from the WordPress core. Best sites that ensure speed, and user experience reduces bloat in the code in whichever way possible.

If a function is available to the WordPress core, there is no need to enhance it with the plugin. The best way is to look for means to edit the code. How many plugins are best for WordPress websites for best web vitals? There is no specific answer, however, before adding plugins, test the speed and other metrics on Google page speed insights or webpage test.

Display raw code on WordPress is simple. It is advisable to test your webpage after adding the raw code. Be carefully not to inject malware on your on site.

What do you think?

100 Points
Upvote Downvote
Avatar of Trendous viralate

Written by Trendous viralate

Blogger and Passionate Person who likes to go with viral trends.

Leave a Reply

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

      in-feed AdSense ads

      How to add in-feed AdSense ads in modern google blogger blog in easy 5 steps

      How to validate Schema Markup

      How to validate Schema Markup of a Blogger or WordPress website and check schema errors easily