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

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.

🚀 Get WP Rocket Now!

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 Insert Tables in WordPress Easily
• A Unique way to Auto Add Dynamic Year in WordPress Post Titles

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.

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.

• Fix CSS Changes not Showing Up in WordPress – Cache Busting
• Remove Google Fonts from WordPress Theme

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.

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.

• Learn how to Setup Accelerated Mobile Pages in WordPress Properly
• Best Practices to Optimize WordPress Robots.txt for SEO

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,

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.

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

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:

• Dashboard>Plugins>Add New. (see this Beginner’s Guide to Install WordPress Plugin)
• Then type Crayon Syntax Highlighter in plugin search bar and hit enter.
• In search results, you will see Crayon Syntax Highlighter plugin by Aram Kocharyan.
• Install and activate this plugin. And you are good to go!

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.

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.

Clicking Add will return you back to your WordPress editor. The following screenshot is the code snippet in WordPress post using 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!