When you try to add code in your WordPress site like normal text, WordPress will incorrectly display it. Each time you save your posts in your site, WordPress runs your content through different cleanup filters. These filters are used in your website to ensure that the hacker or someone else does not inject code through post editor to hack your website. Do you want to learn How to display code on your WordPress site?
Here, one of the most common problems that the newly joined WordPress users come across is displaying code in their site. By default, WordPress filters out all the codes from your posts/pages and makes it impossible to read. Here in this tutorial, we will be teaching you ‘How to display code on your WordPress site?’
There are different methods to display code on your WordPress site, but being a beginner let us learn one of the easiest methods to do it. Having numbers of plugins also make user difficult to operate the site properly. Even though, using a plugin is a better option. It doesn’t require you the knowledge of coding or any other thing. Simply activating a plugin by making some changes easily helps you display code.
Step I: Installing a plugin to display code on your WordPress site
Firstly, it is necessary for you to install a plugin. There are hundreds of plugins in WordPress that allows you with the option to display code on your WordPress site. But, today we will be using SyntaxHighlighter Evolved plugin.
- Log In to your WordPress site or Click on Dashboard
- Click on Plugins>>Add New
- On the search box, type the name of the plugin SyntaxHighligher Evolved.
- Once the plugin appears on your screen, Click on Install
- After the plugin is installed, activate the plugin clicking the button.
Once the plugin is installed, we will be using it to display code in your blog posts. This is usually recommended for the users who display code in their posts, pages, articles, etc in their site.
Advantages of using Plugin to display code on your WordPress site
- You can easily display any code in any programming language in any of the posts as you want or as per the necessities.
- The codes are displayed with syntax highlighting and line numbers.
- Users viewing your website can easily study the code and copy it.
Displaying code on your WordPress site
Upon the activation of the plugin that you installed, go and edit the blog posts or pages where you want to display code.
- On the post edit screen, add ‘SyntaxHighlighter Code’ block to your post.
After this, you can see a new code block in the post editor where you can easily enter your code.
- Add the code in the new code block that appears on your screen after clicking on SyntaxHighlighter Code
Once you have written down the code,
- Select the Block Setting from the right column of the site.
Firstly, you need to select the language for the code you have written. Once you are done selecting the language, you can easily turn off line numbers, provide first line numbers, highlight any of the lines you want, and turn off the features to make links clickable.
Once you have made these changes, Click on the preview changes button to view the changes made. The changes look like this.
The plugin also comes with a number of colour schemes and themes. If you want these changes to be made then simply Click on Settings>>SyntaxHighlighter Page
Make the changes you want to make and simply click on the save changes button. All the changes you have made are saved and will be further applied while adding code in your WordPress site.
As all of us know Why it is necessary to Display code on your WordPress site. Understanding the importance, today, in this tutorial, we learned to display these codes on the WordPress website. You can also easily do it by having a quick look in this tutorial.
You can also easily do it by having a quick look in this tutorial. I hope this tutorial was helpful to you. If you have any queries then Please let us know in the comment box below.
Also, Check Out: