How To Easily Show Code Snippets On Your WordPress Website

WordPress is a powerful content management system that can display many types of media — including many different types of images and videos. Unfortunately, WordPress doesn’t display code snippets very well! 

In most cases, you can’t paste code directly into a new post because WordPress can’t tell if you want to process the code or render it. Highlighting code on a page that is surrounded by text can also be inconvenient for visitors to your site.

Fortunately, there are many solutions available for rendering code on a WordPress site. This post will share a few of the best solutions!

Table of Contents

• Inserting code into WordPress posts without a plugin
• Inserting code into WordPress posts with a plugin
• Best WordPress plugins to display code snippets

Inserting code into WordPress posts without a plugin

Although WordPress doesn’t display code snippets very well, it is still possible to add them using the

[pastacode lang=”markup” manual=”%3Ccode%3E%3C%2Fcode%3E” message=”” highlight=”” provider=”manual”/]

or

[pastacode lang=”markup” manual=”%3Cpre%3E%3C%2Fpre%3E” message=”” highlight=”” provider=”manual”/]

tags.

Of course, there are some issues with using this technique. The main issue is that WordPress will not render certain types of code. For example, if you posted the following snippet into the standard WordPress text editor, it would not render correctly:

[pastacode lang=”markup” manual=”%3Ccode%3E%3C%3Fphp%20echo%20%22Hello%20world%22%3B%20%3F%3E%3C%2Fcode%3E” message=”” highlight=”” provider=”manual”/]

WordPress would detect it is PHP code and not display it. You will have to use HTML character entities to display the content as expected. For example, the following is required in text mode to display the snippet correctly: 

If you aren’t the best at remembering HTML character entities, you can visit a website that will convert strings for you. You can also switch between visual and text editing modes to add your snippet with

[pastacode lang=”markup” manual=”%3Cpre%3E” message=”” highlight=”” provider=”manual”/]

or

[pastacode lang=”markup” manual=”%3Ccode%3E” message=”” highlight=”” provider=”manual”/]

tags.

This can be a bit time consuming if you need to add multiple snippets!

Another problem is the fact that the snippet will display using the theme’s styles. This might lead to the inclusion of unusual fonts that aren’t suitable for displaying code. You might not even have styles defined for the code tag, which will result in a very boring looking code that is hard to read. 

That last issue with displaying a code snippet using this technique is that it won’t have line numbers. Line numbers are a useful feature if you are discussing a piece of code and want to highlight a particular section.

This is how code and pre tags look when rendering a snippet:

Inserting code into WordPress posts with a plugin

You can display code snippets with more style by using one of the many great plugins out there. Many of these plugins also offer additional functionality that makes it easier to copy the code and share it with other people. Here are five of the best:

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved is one of the most popular WordPress plugins for displaying code snippets. It is simple to use and packed with great features. The main features of this plugin include:

• Advanced syntax highlighting for multiple types of snippets including HTML, CSS and PHP using smart tags.
• Automatically creates HTML character entities
• Line numbers are included on snippets
• Multiple themes are available to change the appearance of your snippets
• You can add your own styles to code snippets
• The code boxes are collapsible
• Double-clicking on a code snippet makes it plain text and highlights the entire snippet is highlighted. This makes copying snippets easier.

Using the plugin is easy. Simply wrap your code snippet in the appropriate smart tag for the language you are using. Here are a few examples:

PHP

[pastacode lang=”php” manual=”%5Bphp%5D%3C%3Fphp%0A%0A%2F%2F%C2%A0%20This%20is%20a%20PHP%20code%20snippet%0A%0Aecho%20%22Hello%20world%22%3B%0A%0A%3F%3E%5B%2Fphp%5D” message=”” highlight=”” provider=”manual”/]

CSS

[pastacode lang=”css” manual=”%5Bcss%5D%0A%0A%2F**%20A%20CSS%20code%20snippet%20**%2F%0A%0Abody%20%7B%0A%0Acolor%3A%20blue%3B%0A%0A%7D%0A%0Ah1%20%7B%0A%0Acolor%3A%20green%3B%0A%0A%7D%0A%0A%5B%2Fcss%5D” message=”” highlight=”” provider=”manual”/]

HTML

[pastacode lang=”markup” manual=”%5Bhtml%5D%0A%0A%3C!–%20This%20is%20an%20HTML%20snippet%20–%3E%0A%0A%3Ch1%3EThis%20is%20a%20heading%3C%2Fh1%3E%0A%0A%3Cp%3EThis%20is%20a%20paragraph.%3C%2Fp%3E%0A%0A%5B%2Fhtml%5D” message=”” highlight=”” provider=”manual”/]

This resulting code will look something like:

oEmbed Gist

oEmbed Gist is an easy-to-use plugin that lets you embed Gists. A Gist is a short snippet of code created using GitHub’s gist creator. You can create public gists that can be shared with a URL or embedded into your WordPress site using oEmbed Gist. The main features of this plugin include:

• Quickly display Github Gists
• Works by simply pasting a Gist URL
• Can embed multi-file Gists
• Useful view raw feature makes copying code easy
• Line numbers
• You can create revisions of the Gist

This is perhaps one of the easiest plugins for displaying code! Start by creating a Gist. We created a simple PHP Gist at https://gist.github.com/anonymous/7d51286a4cc0d63b4da27282bd2e669e. Copy the URL of the saved Gist and paste it into your post.

The end result looks like this:

Crayon Syntax Highlighter

Crayon Syntax Highlighter is a feature-packed option for displaying code snippets. It allows you to really customise how your code snippets are displayed on your WordPress site.

Its main features include:

• Advanced syntax highlighting including Sublime Text styles (a popular text editor)
• Comes with dozens of pre-made themes
• Multi-language support
• Adds line numbers to your code
• Full customisation of the display box including its size, margins and alignment
• Full customisation of the toolbar, tags, code display options and lines
• Capable of loading local and remote files
• Code marking tools and range limiting of the code included from files

Crayon Syntax Highlighter look for any code that is wrapped using pre tags. It uses the attributes inside the pre tag to determine how to display the snippet. There are many attributes available, as listed on this page. Here are a few examples of how we would render snippets:

PHP

[pastacode lang=”php” manual=”%3Cpre%20lang%3D%22php%22%20title%3D%22A%20PHP%20example!%22%3E%0A%0A%3C%3Fphp%0A%0Aecho%20%22Hello%20world!%22%3B%0A%0A%3F%3E%0A%0A%3C%2Fpre%3E” message=”” highlight=”” provider=”manual”/]

CSS

[pastacode lang=”css” manual=”%3Cpre%20lang%3D%22css%22%20title%3D%22A%20CSS%20example!%22%3E%0A%0A%2F**%20A%20CSS%20code%20snippet%20**%2F%0A%0Abody%20%7B%0A%0Acolor%3A%20blue%3B%0A%0A%7D%0A%0Ah1%20%7B%C2%A0%0A%0Acolor%3A%20green%3B%0A%0A%7D%0A%0A%3C%2Fpre%3E” message=”” highlight=”” provider=”manual”/]

HTML

[pastacode lang=”markup” manual=”%3Cpre%20lang%3D%22html%22%20title%3D%22An%20HTML%20example!%22%3E%0A%0A%C2%A0%20%C2%A0%20%3C!–%20This%20is%20an%20HTML%20snippet%20–%3E%0A%0A%C2%A0%20%C2%A0%20%3Ch1%3EThis%20is%20a%20heading%3C%2Fh1%3E%0A%0A%C2%A0%20%C2%A0%20%3Cp%3EThis%20is%20a%20paragraph%3C%2Fp%3E%0A%0A%3C%2Fpre%3E” message=”” highlight=”” provider=”manual”/]

This would render the following (using the Sublime theme):

There are dozens of ways to render your code using this plugin. Check out the documentation for more information.

Pastacode

The Pastacode WordPress plugin uses PrismJS, a popular syntax highlighting framework. It’s the one we’re using on this page. 

It is a lightweight solution that is packed with features, including:

• Extremely small download size
• Uses semantically correct code tags to display code snippets
• All styling is done via CSS
• Wide browser support
• Highlights specific lines
• Easy to customise or extend styles
• Supports more than a dozen languages
• Caching
• Can embed code from multiple sources, including Gist, Pastebin, BitBucket and GitHub

Using the plugin is simple. Click on the Pastacode button in the WordPress editor.

You will have the option of importing code from various locations or writing new code. We are going to write a quick PHP script.

Our PHP snippet looks like this:

Pastebin

Pastebin is the most popular website for posting code snippets online. It supports every programming language known to man and has some very useful features like snippet expiration timers. The main features of the Pastebin WordPress plugin include:

• Include Pastebin code snippets with a single line
• Line numbers
• Optional syntax highlighting and support for dozens of languages
• Can also use a shortcode
• Raw code and one-click code download

The Pastebin WordPress plugin functions in a similar way to the oEmbed Gist plugin. You simply paste in the address of your Pastebin code snippet to include it in your post. We created a basic PHP snippet at http://pastebin.com/gb5QtjaY.

Placing this line into a WordPress post results in:

You could also use the shortcode [pastebin id=“gb5QtjaY”]

Thanks for reading How To Show Code Snippets in WordPress. For more WordPress hints and tips, subscribe to our blog or follow us on social media!