The Best WordPress Plugins for Displaying Code Snippets (2018)

The Best WordPress Plugins for Displaying Code Snippets (2018)You don’t have to be a full-time programmer to learn how to display code on your WordPress site.

Maybe you’ve just found out a good tutorial that you want to share? Maybe you’ve written about different tips and tricks, some of which require minor code modifications?

Or maybe you really are a programmer who wants to highlight or showcase a particular piece of code?

The problem with all these cases is that displaying raw code in a WordPress post or page can be quite difficult.

And that is why we’ve surfed the Internet and found out the best plugins for displaying code snippets.

With their help, you will be able to effortlessly display all sorts of code anywhere on your WordPress site.

Snipplr

Snipplr is more of a platform than a plugin. You can post a piece of code on their website and later on embed it in your page or post, much in the same way you embed a tweet or an Instagram post.

The downside of this approach is that the code snippets are not actually available on your site and if something happens to Snipplr, they will all be gone.

There is also an unofficial plugin that allows you to embed code from Snipplr based on the snippet ID. However, this plugin was last updated 8 years ago, so you are probably better off just using the embed code.

CodeColorer

CodeColorer is, as its name suggests, a plugin that allows you to not only post snippets of code on your website, but also to highlight them properly.

It’s based on the GeSHi library and currently supports more than 250 different programming languages.

It also allows you to limit the box size. This means that if you post a particularly large snippet, instead of additional height atop the content on your web page, a handy mini-scroll bar will appear.

On top of that, you can also add inline code snippets if you just want to post a specific line or a single comment. They too will appear highlighted.

And actually adding code to your site is simple. All you have to do is add the simple shorttag [cc lang=”lang”] [/cc], where “lang” will be replaced with the programming language you are using.

A quick example with PHP code will look like this:

[cc lang="php"]
// your actual code
[/cc]

CodeColorer also offers 9 color themes. You will be able to customize each one of them via CSS.

SyntaxHighlighter Evolved

This is one of the most popular plugins for displaying code snippets and for good reason.

In order to work, it only requires that you put two simple tags at the beginning – [lang], and at the end of the given code snippet – [/lang], where “lang” is the name of the programming language being used.

Here is an example:

[ php]
// your actual code
[/ php]

And that’s it. Your code will now show up and will be properly highlighted.

For more advanced users, there is a whole host of snippet customization options.

What makes it different from other plugins is the underlying technology. Instead of the GeSHi library, SyntaxHighlighter Evolved uses the SyntaxHighlighter JavaScript library.

This script library is also used by default on WordPress.com – the WordPress creators’ free blogging platform.

SyntaxHighlighter Evolved comes with 7 themes. You will be able to modify them additionally or to even build your own theme using CSS classes.

WP Code Highlight.js

WP Code Highlight.js uses the same library as SyntaxHighlighter Evolved does. However, there is one big difference – you don’t have to specify the programming language. All you need to do is put your code between the <pre><code> and </pre></code> tags and that’s it.

The plugin will do all the rest – it will guess the programming language being used and will apply adequate highlighting.

Another advantage is that WP Code Highlight.js can be hosted both locally and on a CDN. The local hosting option allows you to choose exactly which language packages you need. If you only post PHP and CSS code, you probably won’t need the C or C# packages.

 



Leave a Reply

Your email address will not be published. Required fields are marked *