A Guide to display code on WordPress website

Posted on By Crazy Explorer

Do you want the code in your WordPress blog articles to be visible? WordPress would display code incorrectly if it were added as plain text. 

Every time you save a post in WordPress, multiple cleaning filters are applied to your content. These filters are in place to prevent code injection via a post editor, which might lead to website hacking. 

This post will demonstrate the correct techniques for quickly displaying code on your WordPress website. You can pick the approach that best suits your needs after we demonstrate many potential approaches. 

Method 1. Display Code Using the Default Editor in WordPress 

Beginners and users who don’t need to display code frequently are advised to utilise this way. 

Simply make changes to the blog post or web page where you want the code to appear. You may add a new code block to your post on the post edit screen. 

Now you may type the code snippet into the block’s text box. 

You may then save and preview your blog post to see the code block in action. 

The code block may appear differently on your website depending on your WordPress theme. 

Method 2. Display Code in WordPress Using a Plugin 

In order to display code in your blog articles using this technique, we will be utilising a WordPress plugin. For users who often exhibit code in their articles, this approach is advised. 

Compared to the usual code block, it offers you the following benefits: 

  • You may quickly show any code in any programming language thanks to it. 
  • It shows line numbers and syntax highlighting for the code. 
  • The code is simple to understand and copy for your users. 

Installing and turning on the SyntaxHighlighter Evolved plugin is the first step. For further information, visit our step-by-step tutorial on installing a WordPress plugin. 

Upon activation, you can go ahead and edit the blog post where you want to display the code. On the post edit screen, add the ‘SyntaxHighlighter Code’ block to your post. 

You may now add your code in a new code block in the post editor. You must choose the block settings from the right column after entering the code. 

You must first choose the language in which to write your code. Following that, you may disable line numbers, enter the initial line number, select any line to be highlighted, and disable the option to make links clickable. 

Save your post when you’re finished, then click the preview button to see it in action. 

There are several colour schemes and themes included with the plugin. You must go to Settings » SyntaxHighlighter to alter the colour scheme. 

You may choose a colour scheme and modify SyntaxHighlighter parameters from the settings page. To get a preview of the code block at the bottom of the page, save your preferences. 

Using SyntaxHighlighter with Classic Editor 

Here is how to use the SyntaxHighlighter plugin to add code to your WordPress blog articles if you are still using the outdated traditional WordPress editor. 

Simply enclose your code in square brackets with the name of the language. For instance, if you were to add PHP code, you would do it as follows: 

[php] 
<?php 
private function get_time_tags() { 
$time = get_the_time('d M, Y'); 
return $time; 
} 
?> 
[/php]

Similar to how you would wrap an HTML code around an HTML shortcode, you would do it as follows: 

[html] 
<a href="example.com">A sample link</a> 
[/html]

Method 3. Display Code in WordPress Manually (No Plugin or Block) 

Because it takes more effort and occasionally doesn’t function as planned, this approach is best suited for experienced users. 

It is appropriate for users who wish to show code without requiring a plugin and are still using the old classic editor. 

You must first run your code through a free online HTML entities encoder. Your code markup will be converted to HTML entities, enabling you to add the code and get beyond WordPress cleaning filters. 

Now paste your code into a text editor and enclose it between the <pre> and <code> tags. 

Your code would look like this: 

<pre><code> 
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt; 
</pre></code>

Now that the code has been previewed, you may save your post. Users will be able to see and copy the correct code after your browser converts the HTML entities. 

We really hope that this post has shown you how to quickly display code on a WordPress website. 

Recent Posts