Easily Display Programming code in WordPress Website

Display Programming code in WordPress Website : If you trying to display code in your wordpress website but it doesn’t work because it showing regular or simple text.

Several cleanup filter runs at the time of saving post, its saves your website from hacking, its make sure someone doesn’t inject code via post editor

In this article you will find the best method to display programming code in your website, will share different methods and its totally up to you which method you want use.


Method 1. Display the code by default editor (Display Programming code in WordPress Website)

This is just a simple method and recommended for the beginners and the users who don’t need to display the programming code.

Simple add the blog post on the post add screen, just type code and add it where you want display it.

Related : Top 9 Python Libraries for Machine Learning

Display code in WordPress Website

Now just enter or paste code sniped in the text area of the block

Display code in WordPress Website

Now save it and preview the blog post

Here is the sample, how it look like.

it may look different in your website depending on your wordpress theme

Method 2. Display the code using plugin

This is my favorite method where you can easily add code with your required format. this is recommended for the users who really want to show the code in particular programming languages.

Following are the advantages of this plugin.

  • It allows you to easily display any code in any programming language
  • It displays the code with syntax highlighting and line numbers
  • Your users can easily study the code and copy it

How it works:

This is a plugin, so you first need install and activate it SyntaxHighlighter Evolved plugin.

After activation, you just need to edit the post where you want to display the code. Add the  ‘SyntaxHighlighter Code’ block to you post on post edit screen.

Display Programming code in WordPress Website
Display code in WordPress Website

Now you have new code block in the post editor, where you need to enter the code simply. After adding the code, you just need to select the block settings from the right column.

Display Programming code in WordPress Website

Now you can select the language according code and even turn of the line numbers. first line number, highlight the any line which you want, and turn off the feature and make links clickable.

Just see the preview, once you have done and check code action.

Display code in WordPress Website

The plugin comes with different colors and themes. it can be

changed by settings>>SyntaxHighlighter page.

Display code in WordPress Website

You can change the setting like theme color and other SyntaxHighlighter settings. After saving you can again see the preview.

Also Read : 7 Analytical Tips and Tricks to Learn Programming Faster – #2 Will Land You a Job

Display code in WordPress Website

Classic Editor Using SyntaxHighlighter

if you are using old classic then this is for just install and activate the plugin and enjoy. Here are some feature.

You just need to wrap the code around square brackets with the language name. for an example, if you are using php language, here is below an example.

<pre class="wp-block-syntaxhighlighter-code">
if (empty($_POST[’todo’])) {
$todo = ‘default’;
} else {
$todo = $_POST[’todo’];

Same goes for HTML, Now if you want to add HTML code, you just need to wrap it around HTML short code as per below.

<a href=”example.com”>A sample link</a>

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

Also Read : WordPress Best CMS for SEO And Here is 10 Reasons Why

if you are a developer who do not want to use plugin or block so here for you the method.

This method is advance and require some more work.

First, Pass your code via an online HTML entities encoder tool. Tool work is it will change your code markup to HTML entities, that will allow you to add the code and bypass the WordPress cleanup filters.

Now in the text editor you need to copy and paste your code and wrap it around <pre> and <code> tags.

Your code would look like below code:

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

Now you nee to save your post and then preview the code in action. Your browser will work here, it convert the HTML entities and users will be able to see and copy the correct code.

I hope this article help you to display code in correct format, These method work and easily display the code in wordpress website.

For more Tech news please subscribe to our YouTube Channel for WordPress video tutorials. Please follow our Facebook page and Instagram page also.

Spread the love

Leave a Reply

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