JAYSDREAMLAND
A Service Oriented Company, that Delivers Technology News Content Providing Top Notch, Bespoke Website Design Services to Individuals and Businesses Alike.

Step By Step On How To Display Code On A WordPress Site Easily

Do you want to display code on your WordPress  blog post?

Well JDL BASIC will be explaing in details In this article, the three ways you can use to dispaly code on your wordpress post.

1. Display Code Using The Default Editor in WordPress

This method is recommended for beginners and users who don’t need to display code very often.

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.

Add code block to your WordPress posts

You can now enter the code snippet in the text area of the block.

Add code to your blog post

After that, you can save your blog post and preview it to see the code block in action.

PHP code displayed in WordPress

Depending on your WordPress theme, the code block may look different on your website.

DONE!!!

2. Display Code in WordPress Using a Plugin

For this method, we will be using a WordPress plugin to display code in your blog posts. This method is recommended for users who often display code in their articles.

It gives you the following advantages over the default code block:

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

First, you need to install and activate the SyntaxHighlighter Evolved 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.

SyntaxHighlighter code block

You will now see a new code block in the post editor where you can enter your code. After adding the code, you need to select the block settings from the right column.

SyntaxHighlighter code block settings

First, you need to select the language for your code. After that, you can turn off line numbers, provide first line number, highlight any line you want, and turn off the feature to make links clickable.

Once you are done, save your post and click on the preview button to see it in action.

Code displayed with syntax highlighting

The plugin comes with a number of color schemes and themes. To change the color theme, you need to visit Settings » SyntaxHighlighter page.

SyntaxHighlighter settings

From the settings page, you can select a color theme and change SyntaxHighlighter settings. You can save your settings to see a preview of the code block at the bottom of the page.

Code block preview

Using SyntaxHighlighter with Classic Editor “For Dose Still Using Old Classic WordPress Editor”

If you are still using the old classic WordPress editor, then here is how you would use SyntaxHighlighter plugin to add code to your WordPress blog posts.

Simply wrap your code around square brackets with the language name. For example, if you are going to add PHP code, then you will add it like this:

[php]

[/php]

Similarly, if you wanted to add an HTML code, then you will wrap it around the HTML shortcode like this:

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

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

This method is for advanced users because it requires more work and does not always work as intended.

It is suitable for users who are still using the old classic editor and want to display code without using a plugin.

First, you need to pass your code through an online HTML entities encoder tool. It will change your code markup to HTML entities, which will allow you to add the code and bypass the WordPress cleanup filters.

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

Adding code manually in classic editor

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>

You can now save your post and preview the code in action. Your browser will convert the HTML entities and users will be able to see and copy the correct code.

Manually displaying code in WordPress

  • Thanks For Reading...
If you liked this article, then please subscribe to our YouTube Channel, "Its Free" and also stay with us on Twitter, Facebook, & Instagram.
NEVER MISS OUT
Stay tuned with our daily recap of what’s trending & More by JDL
Join over 260 subscribers!
You might also like

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept