How to Easily Display Codes in Your WordPress Site

Sharing code snippets in your posts can be tricky at times. If you own any development related website than you will need constant display of codes. Putting any programming codes like HTML, CSS, PHP or JavaScript into your post that actually looks like code but doesn’t behave like code is challenge for every bloggers. In this post we will explore some options on how to easily display codes in your WordPress site.

How to Easily Display Codes in Your WordPress Site

Why displaying code is difficult?

If you simply paste your code in your posts editor, WordPress process it as real code and it either disappears or displays oddly. Also as security precautions, WordPress filters out much raw codes in posts, widget or comments. Another problem you can face is syntax highlighting. Even if you successfully display code, chances are the code have messed up layout and is not in readable form for normal users.

Using a plugin to display codes

A safe way to display the codes in your post is by using a reliable plugin. First install the Syntax highlighter Evolved plugin by Alex Mills.

How to Easily Display Codes in Your WordPress Site with syntax-highlighter-plugin

After activation, go to Settings>Syntax highlighter to set the plugin. The default setting of the plugin is good enough for lots of websites. If you need some additional custom settings you can do it using the setting page of plugin.

syntax-highlighter-setting How to Easily Display Codes in Your WordPress Site

Syntax highlighter Evolved plugin uses shotcodes to display code. You need to mention the name of language that the code belongs to inside the shortcode.

If you want to display PHP code then use the shortcode as given below.


[php]
<?php
   echo  “This is PHP code”;
?>
[/php]

The above code will look like this in your website.

php-syntax-highlighter

For CSS use your code lke this


[css]
.basic-class{
    Font-weight:600;
    Color:#ccc;
}
[/css]

This will be displayed as given below by the syntax highlighter.

css-syntax-highlighter

The plugin will beautifully highlight the code and make it readable. It also adds line numbers and handles tab indent and spacing correctly. Users can easily copy and paste the codes form output of Syntax highlighter plugin.

Displaying code without plugin:

If you occasionally add code snippets in your website then using any kinds of plugin can be extra load to your server.

Using Character Entities:

One of the quick solutions for displaying code is by converting code to HTML entities. HTML entities are not interpreted as code but displayed just like their non-entity counterpart. In HTML entities lower than sign (<) is represented as &lt; and closing bracket or greater than  sign as &gt; . So any PHP code will look like this

&lt;?php echo “Hello World”;  &gt;

However writing HTML entities manually can be a tedious task. You can use many online tools like this one to convert the code into HTML entities.

By converting normal code into HTML entities, you can use them in your post. The HTML entities code will be displayed as desired if converted correctly.
There is a list of resources with which you can automatically turn HTML tags into character entities.

Also Read:   How to Add Border Around Image in WordPress
Using the <pre> tag

“Pre” stands for “Preformatted text”. The simplest way to display code is to wrap everything inside <pre></pre>. Pre tag will display everything inside the tag exactly as it is. Every space, line break, every bit of code is exactly reproduced.


<pre>add_action(){
                   Function code.
                 }</pre>

Notice I have given no line breaks after opening pre tag and before closing pre. It is because most JavaScript syntax highlighter interprets these line breaks as actual line breaks. So it is better to avoid those line breaks.

Using the <code> tag

However another semantically correct and recommended method is to wrap your code inside the <code></code> tags. This tag separates the computer code from natural language. Using <code> tag is great for non-HTML codes. But when you use a HTML markup inside code tag, web browsers may treat it as actual HTML codes resulting in messed of layout.

To avoid this error you can use character entities or extended characters to represent the left and right arrow characters so that it is not recognized as the beginning and end of an HTML tag by browser. Here is an example of this.


<code>
  <div class="header">
    <h1>
         Heading
    </h1>
  </div>
</code>
Using both <code> and <pre> tag together

The perfect way for displaying code is using both <code> and <pre> tags together as shown here.


<pre><code>
    Your       
       block of
    code here.
</code></pre>  

We hope the techniques mentioned here was helpful in giving some idea on how to easily display codes in your WordPress site.

The following two tabs change content below.

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post