TechNumero

How to Display Code Snippets in WordPress Post or Page

Learn how you can display Code Snippets in WordPress post or page. What are the best ways to display code snippet in WordPress within a blog post.

If you blog about how to guides on WordPress, customization of some CSS/HTML or other how-to tutorials which involve usages of code. 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 same format of text in your post. But it is not advisable to do so. As writing the code in text format will not differentiate it from the normal text. And sometimes your actual code syntax or formatting may be changed by WordPress Text Editor. Because Text editor is designed to process some sort of codes.

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

Learn How You can Display Code Snippets in WordPress

You might like to display code in two ways. Within a paragraph or in a separate code snippet box. You can use <code> tag to display code within a paragraph, like below given image.

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 can be done by two methods: if your theme supports Custom CSS feature, you can add the following style code under Custom CSS. Or you can insert following style code in the style.css file of your WordPress.

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 display this code Web Server: Apachein a line of a paragraph.

Then you need to write in the text editor of WordPress

<code>Web Server: Apache</code>

This method is good when your code is a single line string of symbols and keywords. For larger codes you should use second method i.e. separate code box.

For separate code snippet box or block, there are two most popular solutions.
  1. Using <pre> tag
  2. Using code snippet plugin

Note:
As I explained above how you can assign values to style <code> tag as you want. 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}

First Method: without plugin

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 keeping the code syntax and formatting. You can also change 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 in code box

For displaying this code in 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.

Second method: using WordPress plugin

There are many plugins available for displaying code snippets in WordPress post or page. You can search WordPress plugin library using keyword “syntax highlight”.

I have test many of them on basis of their features, rating and downloads. I found that plugin called Crayon Syntax Highlighter stands out among many of them.

To install this plugin you need to go to your WordPress:

Dashboard>Plugins>Add New.

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!
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 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 which you can tune according to your requirements.

I hope this post will help you out displaying code snippets in WordPress post or page. Do share your experience on the subject using these tweaks. If you want to suggest some other technique to display code snippets in WordPress, mention it in comments down below. Feel free to ask if you are facing any problem applying above methods.
Cheers!