Latest Tech and Tips

How to Easily Display Code on Your WordPress Site

11

Do you desire to display code in your WordPress article? If you attempted to include code like normal message, after that WordPress will certainly not display it appropriately.

WordPress runs your web content via a number of cleaning filters each time you conserve an article. These filters exist to make certain a person does not infuse code through blog post editor to hack your site.

In this write-up, we will certainly reveal you the appropriate means to easily display code on your WordPress site. We will certainly reveal you various techniques, and also you can pick the one that finest fits your demands.

How to easily display code in WordPress posts

Method 1. Display Code Using The Default Editor in WordPress

This technique is suggested for newbies and also customers that do not require to display code really typically.

Simply modify the post or web page where you desire to display the code. On the blog post modify display, include a brand-new code block to your blog post.

Add code block to your WordPress posts

You can currently get in the code bit in the message location of the block.

Add code to your blog post

After that, you can conserve your post and also sneak peek it to see the code block at work.

PHP code displayed in WordPress

Depending on your WordPress style, the code block might look various on your site.

Method 2. Display Code in WordPress Using a Plugin

For this technique, we will certainly be utilizing a WordPress plugin to display code in your article. This technique is suggested for customers that typically display code in their short articles.

It provides you the adhering to benefits over the default code block:

  • It permits you to easily display any kind of code in any kind of programs language
  • It shows the code with phrase structure highlighting and also line numbers
  • Your customers can easily examine the code and also duplicate it

First, you require to mount and also trigger the SyntaxHighlighter Evolved plugin. For even more information, see our detailed overview on how to mount a WordPress plugin.

Upon activation, you can proceed and also modify the post where you desire to display the code. On the blog post modify display, include the ‘SyntaxHighlighter Code’ block to your blog post.

SyntaxHighlighter code block

You will certainly currently see a brand-new code block in the blog post editor where you can enter your code. After including the code, you require to pick the block setups from the best column.

SyntaxHighlighter code block settings

First, you require to pick the language for your code. After that, you can switch off line numbers, offer very first line number, highlight any kind of line you desire, and also switch off the function to make web links clickable.

Once you are done, conserve your blog post and also click on the sneak peek switch to see it at work.

Code displayed with syntax highlighting

The plugin features a variety of color pattern and also motifs. To alter the shade style, you require to see Settings” SyntaxHighlighter web page.

SyntaxHighlighter settings

From the setups web page, you can pick a shade style and also modification SyntaxHighlighter setups. You can conserve your setups to see a sneak peek of the code block at the end of the web page.

Code block preview

Using SyntaxHighlighter with Classic Editor

If you are still utilizing the old standard WordPress editor, after that right here is how you would certainly utilize SyntaxHighlighter plugin to include code to your WordPress article.

Simply cover your code around square braces with the language name. For instance, if you are going to include PHP code, after that you will certainly include it similar to this:

[php]
<