How to Easily Display Code on Your WordPress Site

By WP Saviour •  Updated: 04/16/21 •  5 min read

Do you need to show code in your WordPress weblog posts? For those who tried so as to add code like common textual content, then WordPress won’t show it accurately.

WordPress runs your content material by means of a number of cleanup filters every time you save a put up. These filters are there to verify somebody doesn’t inject code through put up editor to hack your web site.

On this article, we are going to present you the correct methods to simply show code in your WordPress web site. We’ll present you totally different strategies, and you’ll select the one that most closely fits your wants.

displaycodeinwp-1-8138738

Technique 1. Show Code Utilizing The Default Editor in WordPress

This technique is really useful for saviours and customers who don’t have to show code fairly often.

Merely edit the weblog put up or web page the place you need to show the code. On the put up edit display, add a brand new code block to your put up.

add-code-block-9164724

Now you can enter the code snippet within the textual content space of the block.

addcode-6836856

After that, it can save you your weblog put up and preview it to see the code block in motion.

phocodedisplay-3305481

Relying in your WordPress theme, the code block might look totally different in your web site.

Technique 2. Show Code in WordPress Utilizing a Plugin

For this technique, we will likely be utilizing a WordPress plugin to show code in your weblog posts. This technique is really useful for customers who typically show code of their articles.

It provides you the next benefits over the default code block:

First, it’s worthwhile to set up and activate the SyntaxHighlighter Evolved plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

Upon activation, you may go forward and edit the weblog put up the place you need to show the code. On the put up edit display, add the ‘SyntaxHighlighter Code’ block to your put up.

shcodeblock-3968989

You’ll now see a brand new code block within the put up editor the place you may enter your code. After including the code, it’s worthwhile to choose the block settings from the appropriate column.

codeblocksettings-3603205

First, it’s worthwhile to choose the language to your code. After that, you may flip off line numbers, present first line quantity, spotlight any line you need, and switch off the characteristic to make hyperlinks clickable.

As soon as you might be accomplished, save your put up and click on on the preview button to see it in motion.

syntaxhighlighter-codeblock-7355619

The plugin comes with various colour schemes and themes. To vary the colour theme, it’s worthwhile to go to Settings » SyntaxHighlighter web page.

shsettings-6860742

From the settings web page, you may choose a colour theme and alter SyntaxHighlighter settings. It can save you your settings to see a preview of the code block on the backside of the web page.

codeblockpreview-6209307

Utilizing SyntaxHighlighter with Basic Editor

In case you are nonetheless utilizing the old classic WordPress editor, then right here is how you’ll use SyntaxHighlighter plugin so as to add code to your WordPress weblog posts.

Merely wrap your code round sq. brackets with the language identify. For instance, if you’re going to add PHP code, then you’ll add it like this:

[php]

[/php]

Equally, for those who needed so as to add an HTML code, then you’ll wrap it across the HTML shortcode like this:

[html] A pattern hyperlink

[/html]

Technique 3. Show Code in WordPress Manually (No Plugin or Block)

This technique is for superior customers as a result of it requires extra work and doesn’t at all times work as supposed.

It’s appropriate for customers who’re nonetheless utilizing the outdated basic editor and need to show code with out utilizing a plugin.

First, it’s worthwhile to move your code by means of a web based HTML entities encoder instrument. It is going to change your code markup to HTML entities, which can assist you to add the code and bypass the WordPress cleanup filters.

Now copy and paste your code within the textual content editor and wrap it round

 and  tags.


texteditorcode-8061861


Your code would appear like this:


 <p><a href="/dwelling.html">This can be a pattern hyperlink</a></p>



Now you can save your put up and preview the code in motion. Your browser will convert the HTML entities and customers will be capable to see and replica the right code.
manualcode-9012395
We hope this text helped you learn to simply show code in your WordPress web site. You may additionally need to see our final listing of the most wanted WordPress tips, tricks, and hacks. gp-5142180 as-4378247

WP Saviour

I am a WordPress specialist. My mission is to help you create beautiful websites with ease!