How To Display Code On WordPress Post

How To Display Code On WordPress Post

Hi Everybody!! Today, I am sharing the methods to DisplayCode On WordPress Post. If you tried to enter code in WordPress likeregular text, then WordPress will not show it correctly.

WordPress runs various content filters every time yousave post. These filters are present to make sure someone does not inject anycode to your post to hack your website.

In this post, I will show you 2 methods to DisplayCode On WordPress Post. So, let’s see the methods.

Must Read: How To Change Font Size In WordPress

How To Display Code On WordPress Post

Method 1: Display Code Using Gutenberg Editor

This method is more suitable for beginners and users who don’t display code very often.

Just edit an existing post or add new post. Now clickon Add New Block button present on the top left side of the postedit screen.

Add Code block from Formatting Tab anywhere in your post. You can now enter the code which you want to show in your post.

Adding Code Block to Display Code On WordPress Post
Adding Code Block

In this way, you can easily Display Code UsingGutenberg Editor. This was the 1st Method to Display Code OnWordPress Post.

Must Read: 5 Best FTP Clients For Windows WordPress Users

Method 2: Display Code Using a Plugin

In this method, we will use a WordPress Plugin to display code On WordPress Post post or page. This method is best for the users who very often display code in their articles. The plugin which we are using in this method is SyntaxHighlighter Evolved.

Advantages of using SyntaxHighlighter Evolved to display code On WordPress Post over the Gutenberg Code block are:-

  • It gives you the access to displayany code in any programming language.
  • It also displays the code with syntaxhighlighting and line number.
  • The users can study the codeand easily copy it.

First, install and activate SyntaxHighlighter Evolved plugin. After activation, edit an existing post or create a new post. Now click on Add New Block button and add the SyntaxHighlighter Code block from Formatting tab to your post.

Adding SyntaxHighlighter Code Block to Display Code On WordPress Post
Adding SyntaxHighlighter Code Block

You will now see a code block in your editor. Add the code you want to display in the text area of the block. After adding the code, select the settings from the right settings area.

This plugin also has number of themes and colorschemes. For changing the Color Theme go to Settings SyntaxHighlighter.Save the settings to see a preview of the code at the bottom of page.

Change Colour Theme in SyntaxHighlighter Evolved To Display Code On WordPress Post
Change Colour Theme in SyntaxHighlighter Evolved

Must Read: How To Create Reusable Block In Gutenberg Editor

So, these were the methods to Display Code OnWordPress Post. I hope that this post helped you to easily Display Code OnWordPress Post. If you found this post informative then, please share this postwith you friends and colleagues.

Manvir Singh

Leave a Reply

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