ADVERTISEMENT
Categories: WordPress

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

ADVERTISEMENT

Learn how you can display Code Snippets in WordPress post or page with/without plugin. Which are the best ways to display code snippet 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.

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. As 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 WP Text editor is designed to process some sort of codes.

How to Display Code Snippets in WordPress

To retain the code syntax and to differentiate the code from 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

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 codes snippets, you should use the second method i.e. separate code box.

II. Display Code in Separate Code Snippet Box or Block in WordPress

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 in 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 if 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, all you need 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 one of the best WordPress syntax highlighter plugins available to display code in WordPress easily.

1. SyntaxHighlighter Evolved

Syntax Highlighter Evolved is pretty good and easy to use plugin to display code block for showcasing code snippets in WordPress. SyntaxHighlighter Evolved stands out among others (Syntax Highlighter plugins) based on features, user ratings, updates, and 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 issue installing this plugin? You may refer 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 box within WordPress post/page.

All you need is to use shortcodes to output code snippet 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.

Syntax Highlighter Evolved Backend View

The code snippet will display like the screenshot below at front-end.

Syntax Highlighter Evolved Code Frontend View

Also, to customize the code box’s appearance you can change 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 from 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

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

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 displayed in WordPress Post using Crayon Syntax Highlighter Code Snippet Box – Frontend view

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

Conclusion

I hope this post helps you out displaying code snippets in WordPress post or page. 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 problem applying the above methods. I will be happy to help.

Cheers!

ADVERTISEMENT
Shashank Singh @MrShashankSingh

Shashank Singh is a web addict and amateur blogger since 2007. His current interests include blogging, SEO and WordPress. He does have a full-time job to make living out of it. See his social profiles to know him even better.

View Comments

Share
Published by
Shashank Singh @MrShashankSingh
ADVERTISEMENT

This website uses cookies.

Read More