How to Display Code in WordPress – 3 Methods (with and without plugins)

Do you want to display bits of code on your site but aren’t sure of the best way to do it? This post is for you. In this guide, we’ll show you different methods to easily display code in WordPress.

Why is it hard to display code in WordPress?

If you have a site where you post useful guides to your users, you may need to showcase code snippets on your blog posts. The thing is that it’s not as simple as pasting the code. Actually, if you paste an HTML snippet in your blog post, for example, it won’t work. As you know, the WordPress text editor is an HTML-based editor, so it automatically processes the code and prints it.

Similarly, if you copy and paste a shortcode, WordPress will display the function instead of simply showing the written shortcode.

This isn’t ideal if you want to display the code and can lead to poor formatting. For example, if you want to embed some HTML code in your article through the WordPress classic editor, the editor will process the code and display it inside the content. 

The best way to fix this issue is to use dedicated styling for your code snippets. And that’s what we are going to show you in this article.

How to display code in WordPress

There are 3 main methods to display code in WordPress:

  1. Using the WordPress editor
    1. Gutenberg
    2. Classic Editor
  2. Using a dedicated WordPress plugin
  3. Inserting the code manually

Let’s have a look at each method and show you how to display code on your site step-by-step.

1) Using the WordPress Editor

The easiest way to display code in WordPress is to use the WordPress Editor. In this section, we’ll show you how to do it using both Gutenberg and the Classic Editor.

1.1) Gutenberg

First, log in to your WordPress website and open the post where you want to display the code. Search for a block called Code and select it.

gutenberg code block

You can start writing your code there and once you’re done, publish the post. In the front end, you will see the code.

gutenberg code

 

This is how you can use the Gutenberg editor to display code on your site.

1.2) Classic Editor

If you’re still using the Classic Editor, you can also display code snippets by using the preformatted text option. First, open the post where you want to include the code using the classic editor.

sidebar css

Then, select the code snippet and choose the preformatted text option from the dropdown.

preformatted text

You’ll see how the text changes. Then, publish the article and check the page from the front end and you will see the code inside a custom box as shown below.

sample css

This way, you can display any code on your WordPress website. 

As you can see, using the WordPress Editor is simple and straightforward. However, if you want more options to display different types of code, you’ll need something else.

2) Display code with a WordPress plugin

Another way to display code in WordPress is by using a dedicated plugin. There are many options out there, but for this demonstration, we’ll use a free tool called SyntaxHighighter Evolved

First, you need to install the plugin, so after logging in to your site, go to Plugins > Add New. Search for the SyntaxHighlighter Evolved plugin, install it, and activate it.

install syntax highlighter evolved

Under the WordPress Settings section, you will see the plugin’s configuration options.

display code in wordpress - syntaxhighlighter plugin settings

On the plugin’s settings page, you will see several customization options:

  • Version control
  • Color theme
  • Brushes loading
  • Miscellaneous
  • Additional CSS classes
  • Starting line number
  • Line number padding
  • Tab size
  • Title

display code in wordpress - syntaxhighlighter plugin settings

If you are a basic user, the default configuration is good enough, whereas if you are an advanced user, you may want to have a look at the settings and adjust them to your needs. Once you have changed the settings, save the changes. Under the live preview section, you will see a sample code with a highlighting effect.

display code in wordpress - code preview

At this point, the process varies depending on the editor you’re using. Let’s have a look at both.

2.1) Gutenberg Editor

After activating the plugin, you will see a new block called SyntaxHighlighter Code in the editor.

display code in wordpress - plugin block

You can use that block to display different types of code in your posts. Simply select the block and in the settings panel, you will see the option to choose the language you want to display. You’ll see that there are dozens of languages you can choose from.

block settings

For this example, we will display a CSS code snippet, so we’ll choose CSS from the dropdown.

css language

You can also change the code language from the block section.

block language

After selecting the code language, paste the script in the block.

paste css code

Additionally, you can adjust the plugin’s default settings from the Advanced section in the right panel and change the styling.

syntaxhighlighter evolved settings

Once you’re done, publish (or update) the post and check the post from the front end to see the results.

syntaxhighlighter plugin gutenberg

As you can see in the above screenshot, we have successfully highlighted the CSS code on our post. This way, you can display any code you want in WordPress by simply selecting the correct code language from the block settings.

2.2) Classic Editor

If you are not using the Gutenberg editor, you’ll need to enter the language code manually. To display the Syntaxhighlighter codes using classic editor, we will use shortcodes. If you’re not familiar with shortcodes, we recommend you have a look at this guide.

First, open any post or create a new one using the Classic editor. To display HTML content, for example, use the [html] [/html] shortcode and paste the code between them as follows and publish the post.

[html]
<a href=”quadlayers.com”>QuadLayers</a>
[/html]

display html code

If you check the post from the front end, you will see the highlighted HTML code.

display code in wordpress - html snippet

This is how you can use the HTML embedding feature but you can do the same for any other code languages. For example, to display a PHP snippet, use the [php] [/php] shortcodes, [css] [/css] shortcodes to show CSS, and so on.

This way, you can modify the shortcodes and display any code snippets you like. Let’s display an example PHP code snippet in an article:

[php]
<?php
?>
[/php]

php sample code

As you can see, you can change the codes and display any snippet on your WordPress site.

NOTE: If you want to change the font, font size, and font weight of your code, you need to add a custom CSS class for the Syntaxhighlighter plugin. You can do this from the plugin’s settings and then add CSS code through the WordPress customizer or the theme editor to customize it.

3) Display code manually

If you have coding skills, you can display code in WordPress manually. This is a more advanced method and provides you with a lot of flexibility. For this demonstration, we will use the <pre> and <code> tags to display code in a post.

First, you need to use an external tool to convert your text into HTML. We’ll use MotherEff but you can use any other HTML encoder you like.

Then, paste your HTML snippet in the decoded box and the tool will give you an encoded version.

html encoder

For this example, our code is:

<p><a href="/quadlayers">Visit Our Portfolio</a></p>

And the tool transforms it into this:HTML encoded

 

The code won’t look friendly, but it will do the job.

Then, in your WordPress dashboard open the Classic editor and switch to the text editor.

Display Code in WordPress - Manually from the text editor

Paste the encoded code there using the <pre> and <code> open tags and </code> and </pre> to close them. For example, our sample code will look like this:

Add code to paragraph

 

Then, publish the post and in the front end, you will see the code highlighted as shown below.

paragraph code

This way, you can manually display code in any WordPress post.

NOTE: Gutenberg users won’t be able to use this method. You can only do this using the Classic Editor.

Bonus: How to display code in a paragraph

Apart from displaying code in a WordPress post, another interesting alternative is to display code in a paragraph. In this section, we will show you how to do it. For this, we will use a bit of CSS and HTML.

First, you need to add a simple CSS code to your website. You can either use the WordPress customizer or a site-specific plugin like Code Snippets. For this demo, we will go to Appearance > Customize > Additional CSS and paste our code there.

code {
font-size:1.2em;
color: #1e1e1e;
position: relative;
border-radius: 4px;
background: #e1e1e1
}

Display code in WordPress - Publish CSS changes

Once you publish the changes, open any post you want to edit. Then, select the content you want to highlight. For example, we will display the phrase “start a blog” as code in this paragraph.

start a blog content

Switch to the text editor and wrap the content inside the <code> and </code> tags. Following with our example, our code will look like this:

<code>start a blog</code>

code css added

Then, publish or update the changes and check the front end to see the changes.

start a blog highlighted

This way, you can highlight specific words or sentences. If you want to modify the CSS styling of the code, feel free to edit the CSS script we’ve used here. 

Conclusion

All in all, showcasing code on your site isn’t as simple as pasting the script. However, in this guide, we’ve shown you different methods to display code in WordPress:

  1. Using the WordPress content editor
  2. With a dedicated plugin
  3. Manually

If you want a quick and easy solution, the WordPress content editor provides you the tools to showcase scripts on any post. However, if you need more customization options, the SyntaxHighligher Evolved plugin is your best choice. On the other hand, if you have coding skills, you can add your code snippets manually and customize the styling in the frontend with a bit of CSS.

Finally, if you want to highlight specific sentences or words in a paragraph, you can wrap the text in the <code> </code> tags.

For more information on how to edit code on your site, check out the following guide to edit HTML in WordPress.

Have you found this post helpful? Which method do you prefer to display code on your site? Let us know in the comments section below.