How to Display Code Snippets in WordPress Post/Page (2 Easy Methods)

Updated on

Learn how you can display Code Snippets in WordPress posts or pages with/without plugin. Which are the best ways to display code snippets in WordPress within a blog post? Why you should not display code in WordPress text paragraph format.

If you blog about how-to guides and topics related to programming, web/software development, WordPress, customization of some CSS/HTML, or other how-to tutorials which involve usages of code snippets. And you want to share some piece of code (code snippet) with your readers. So that they can use the code to get their work done easily.

Fastest WordPress Hosting Anywhere!
How to Display Code Snippets in WordPress
How to Display Code Snippets in WordPress

It is obvious that you can write the code in the same format of text in your post. But it is not advisable to do so. Displaying the code in text format will not differentiate it from the normal text. And sometimes your actual code syntax or formatting might be changed by WordPress Text Editor. Because WordPress Text editor is designed to process some codes.

To retain the code syntax and to differentiate the code from the normal text in the blog post you can display the code in code snippet box. Let me explain how you can display Code Snippets in WordPress post or page easily.

Learn How to Display Code Snippets in WordPress

You might like to display code in two ways. Within a paragraph or in a Separate code snippet box.

I. Display Code within a paragraph (inline code) in WordPress: suitable for smaller codes

You can use <code> tag to display code within a paragraph inline with your text content.

Note:
Before applying this method, make sure that you have assigned desired values under <code> tag in CSS of your WordPress. (In most of the themes it comes by default, just check your style.css file.)

It is recommended to add the following code in the style.css file of your Child theme in WordPress. Or if your theme supports Custom CSS feature, you can add the following style code under Custom CSS. However,  I prefer to insert this code in style.css file of the child theme.

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

Once you added above code in CSS of your WordPress, you are ready to use <code> tag.
For example, if you want to display code like this Web Server: Apache in a line of a paragraph.

Then you need to write in the text editor of WordPress

<code>Web Server: Apache</code>

This method is suitable when your code is a single-line string of symbols and keywords. For larger code snippets, you should use the second method i.e. separate code box.

II. Display Code in Separate Code Snippet Box or Block in WordPress: suitable for large code snippets

There are two most popular solutions to display code in the code box in WordPress post or page.

  1. Using <pre> tag (without plugin method)
  2. Using code snippet plugin (plugin method)

Method #1: Display Code in WordPress without plugin (Using <pre> tag)

Note:
As I explained above how you can assign values to style <code> tag to style inline code on your website. This time you need to style <pre> tag by adding the following style code under Custom CSS or in style.css file of WordPress.

pre {
    border: solid 1px #e1e1e1;
    font-size: 1.2 em;
    color: #AE4FC6;
    margin: 10px;
    padding: 10px;
    background: #FFFED1}

Once you added above code to the stylesheet of your WordPress site. Now you can display code snippets in WordPress post or page by using <pre> tag. This tag will make your code look different from the normal text while retaining original the code syntax and formatting. You can also change the style of your code box (block) to make it look cleaner and as per color scheme of your web page.

Let’s say you want to display following code (to disable server signature for site security) in the code box.

Code snippet display using tags

For displaying this code in the code box, you need to write the following code in ‘Text Editor’ in your WordPress.

<pre> #START - Disable server signature #
ServerSignature Off
# END - Disable server signature # </pre>

You can style <pre> tag to change the appearance of code box as you desired.

Method #2: Display Code in WordPress using WordPress plugin

There are several plugins available for displaying code snippets in WordPress post or page. Here I am telling you about one of the best WordPress syntax highlighter plugins available to display code in WordPress easily.

1. SyntaxHighlighter Evolved

Syntax Highlighter Evolved is a pretty good and easy-to-use plugin to display code blocks for showcasing code snippets in WordPress. SyntaxHighlighter Evolved stands out among others (Syntax Highlighter plugins) based on features, user ratings, updates, downloads, etc.

You can install this plugin like any other WordPress plugin.

Check-out step by step instructions to install Syntax Highlighter Evolved:

  1. Go to WordPress admin dashboard > Plugins > Add New
  2. Then search for SyntaxHighlighter Evolved.
  3. From plugin search results install SyntaxHighlighter Evolved authored by Alex Mills (Viper007Bond). Automattic is also a contributor to this plugin.
  4. Activate the plugin and you are done!

Facing any issues installing this plugin? You may refer to our Beginners’ Guide to Install WordPress Plugins (3 Different Ways).

How to Use SyntaxHighlighter Evolved to display code in WordPress

Using SyntaxHighlighter Evolved is very easy and straightforward. Once you installed and activated the plugin. It enables predefined short-codes for displaying code snippets in WordPress post/page.

All you need is to use shortcodes to output code snippets inside the code box.

For example, you want to display the following CSS code in the code block.

To display the CSS code snippet in WordPress, you have to wrap this CSS code within the shortcode for CSS in WordPress editor. Like this,

Backend CSS Shortcode Syntax WordPress

You can find these shortcodes on the plugin’s settings page.

In this example, I am using CSS code so I used CSS short-code. Similarly, you can use shortcodes for other code snippets of different programming languages.

Syntax Highlighter Evolved Backend View
Syntax Highlighter Evolved Backend View

The code snippet will display like the screenshot below at frontend.

Syntax Highlighter Evolved Code Frontend View
Syntax Highlighter Evolved Code Frontend View

Also, to customize the code box’s appearance you can change the look & feel of code box and can play around plugin’s other functionalities from plugin’s settings page.

2. Crayon Syntax Highlighter

(Update: This plugin has not been updated for the last three years and does not guarantee to work with latest versions of  WordPress. Therefore it is better to use the other plugin mentioned above.)

To install Crayon Syntax Highlighter plugin you need to login to your WordPress dashboard:

How to use crayon syntax highlighter

This plugin enables a button named Crayon in WordPress editor. To add your code, you need to click this button.

WordPress Editor with Crayon Syntax Highlighter
WordPress Editor with Crayon Syntax Highlighter

On clicking this button a new overlay screen will appear. You can paste or type the code in the box provided. You can also change theme style and font style from this screen. When you are done, click Add.

Crayon Syntax Highlighter Code Snippet Box - Backend
Crayon Syntax Highlighter Code Snippet Box – Backend

Clicking Add will return you back to your WordPress editor. The following screenshot is the code snippet in WordPress post using Crayon Syntax Highlighter.

code diplayed with crayon syntax highlighter

With the help of this plugin, you can easily display code snippets in WordPress. In this plugin, there are many Settings that you can tune according to your requirements.

Conclusion

I hope this post helps you display code snippets in WordPress posts or pages. Do share your experience on the subject using these tweaks. What other technique/plugin do you use to display code snippets in WordPress? Share that via comments. Feel free to ask a question, if you are facing any problems applying the above methods. I will be happy to help.

Cheers!

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

7 thoughts on “How to Display Code Snippets in WordPress Post/Page (2 Easy Methods)”

  1. Avatar of Sekutu Keadilan

    Thanks a lot for this article.
    These methods work well dude!

    Reply
  2. Hey Sekutu,
    Nice to know that it was helpful.
    Thanks for stopping by.

    Reply
  3. Avatar of Utpal

    Great tutorial. I want to ask you that how we can change the font size of code?

    Reply
  4. Avatar of Mohan Mekap

    Thanks a lot for this information. The pre shortcode works best.

    Reply
    • Hey Mohan,
      Glad that you found it useful. Cheers to pre tag.
      Thanks for stopping by!

      Reply
  5. Avatar of Shrikant Rana

    Hi,
    I am using Woodmart theme.
    I want to show codebox in web page. Any solution for me?

    Reply
    • Avatar of Shashank Singh

      Hey Shrikant,

      The methods explained in the article work fine regardless of WP theme.
      So you can try any of the methods mentioned to display codebox.
      Thanks for stopping by!

      Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.