How to Display Code Easily on Your WordPress Website

How to Display Code Easily on Your WordPress Website

Do you wish to include code in the body of your WordPress blog posts? If you attempt to add code in the same way that you would text, WordPress will not display it correctly.

How to Display Code Easily on Your WordPress Website

Each time you save a post, WordPress runs it through numerous cleanup filters. These filters are in place to prevent someone from injecting code into your website's post editor in order to hack it.

In this tutorial, we'll demonstrate how to properly display code on your WordPress website. We'll demonstrate several approaches, and you can choose the one that works best for you.

Option 1: Display Code Using WordPress's Default Editor This method is ideal for beginners and those who do not frequently need to display code.

You can now enter the code snippet into the block's text section.

Simply edit the blog post or page where you'd like the code to appear. Add a new code block to your post via the post edit screen.

Display code wordpress plugin

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

The code block may appear differently on your website depending on your WordPress theme.

Display code wordpress plugin

Method 2. Using a Plugin to Display Code in WordPress

We're going to use a WordPress plugin to display code in your blog posts for this strategy. This is the preferred method for users who frequently include code in their posts.

  • It provides the following benefits over the standard code block:
  • It enables you to quickly view any code written in any programming language.
  • It displays the code in its entirety, complete with syntax highlighting and line numbers.

Your users can simply study and copy the code After installing and activating the SyntaxHighlighter Evolved plugin, you must first install and activate the SyntaxHighlighter Evolved plugin. For additional information, please refer to our step-by-step instructions on how to install a WordPress plugin.

Display code wordpress plugin

After activation, you can proceed to edit the blog post that will contain the code. Add the 'SyntaxHighlighter Code' block to your post via the post edit page.

In the post editor, you'll now see a new code box where you may put your code. Following the addition of the code, you must choose the block settings from the right column.

Display code wordpress plugin

To begin, you must choose a language for your code. Following that, you can disable line numbers, choose the initial line number, select any line, and disable the feature that makes links clickable.

Save your post when finished and click the preview button to see it in action.

The plugin has several color schemes and themes. To modify the color theme, navigate to Settings » SyntaxHighlighter.

Display code wordpress plugin

You may modify the color theme and other parameters for SyntaxHighlighter from the options page. At the bottom of the page, you can save your settings to see a preview of the code block.

Using SyntaxHighlighter in conjunction with the Classic Editor

If you're still using the ancient WordPress editor, here's how to add code to your WordPress blog articles using the SyntaxHighlighter plugin.

Simply include your code in square brackets followed by the language's name. For instance, if you're going to include PHP code, you'll do so as follows:

<pre>

[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

</pre>

Similarly, if you wanted to include HTML code, you would do so by wrapping it around the HTML shortcode as follows:

<pre>

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

</pre>

 

Method 3: Manually display code in WordPress (No Plugin or Block)

This method is meant for expert users only due to the additional work required and the fact that it does not always perform as intended.

It is intended for people who continue to use the classic editor and wish to view code without the assistance of a plugin.

To begin, you must run your code through an online HTML entity encoder. It will convert your code to HTML entities, allowing you to add the code and bypass WordPress's cleanup filters.

Now paste your code into a text editor and surround it with pre> and code> tags.

Enjoyed this article? Stay informed by joining our newsletter!

Comments

You must be logged in to post a comment.

About Author
Recent Articles