How to display code on your WordPress site?

0
How to display code on your WordPress site
How to display code on your WordPress site

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
Adding a new plugin - How to display code on your WordPress site?
Adding a new plugin
  • On the search box, type the name of the plugin SyntaxHighligher Evolved.
  • Once the plugin appears on your screen, Click on Install
Installing SyntaxHighlighter Evolved Plugin - How to display code on your WordPress site?
Installing SyntaxHighlighter Evolved Plugin
  • After the plugin is installed, activate the plugin clicking the button.
Activating the plugin to display code on your WordPress website - How to display code on your WordPress site?
Activating the plugin to display code on your WordPress website

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.  
Using SyntaxHighlighter Code on blog posts to display code on WordPress site - How to display code on your WordPress site?
Using SyntaxHighlighter Code on blog posts to display code on WordPress site

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
Adding a code in WordPress blog posts 1 - How to display code on your WordPress site?
Adding a code in WordPress blog posts

Once you have written down the code,

  • Select the Block Setting from the right column of the site.
Maintaining the Settings of the code in blog posts - How to display code on your WordPress site?
Maintaining the Settings of the code in blog posts

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.

Arranging Settings to Display code on WordPress site - How to display code on your WordPress site?
Arranging Settings to Display code on WordPress site

Once you have made these changes, Click on the preview changes button to view the changes made. The changes look like this.

Displaying code on WordPress site - How to display code on your WordPress site?
Displaying code on WordPress site

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

Changing the color themes from the settings - How to display code on your WordPress site?
Changing the colour themes from the settings

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.

Wrapping Up

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: