How To Display Code Within A WordPress Post

There are times when you will want to show some code within a WordPress post – perhaps to describe a problem, or maybe you want to demonstrate how to manipulates WordPress’ core code in order to achieve more functionality, as I do with some of my blog posts.

The trouble is that you when you write code straight into a WordPress post, WordPress will assume that it is intended to be read as code and not as plain text, which is what you are trying to achieve, so that readers can see the code, rather than WordPress trying to make sense of the code.

You need to use a plugin so that when you paste the code into your post, WordPress knows not to see the code as code, but rather, as text.

I have found that the best plugin for the job is SyntaxHighlighter Evolved, written by viper007bond, based on the original project by Alex Gorbatchev.

Installing the plugin

The best way to install plugins now is to use the built-in installer within WordPress, rather than downloading the zip file and uploading it to your server. It’s much cleaner this way. From your WordPress dashboard, go to Plugins and then Add New. Search for the plugin and follow the steps to install and activate it.

Once installed, you may want to modify the options so that code is displayed exactly the way you want it to appear. There’s many options that you can include in the shortcode every time you want to display code to tweak each instance of code. These options are located under Settings> SyntaxHighlighter.

Using the plugin

Now whenever you want to display code, you just need to write a little shortcode in your post editor, depending on what type of code you are trying to paste. For example, if you want to display some html, you would write the following (remove the *s):

[html]HTML code here[/html]

And if you wanted to paste some PHP, you would write this:

[php]PHP code here[/php]

There are shortcodes for nearly any code you could possibly want to paste and a full list of shortcodes is available from the project’s Wiki. However, you can also include some options within your shortcode to tweak the display of the code. The full list of these tweaks can be seen at the bottom of your SyntaxHighlighter Options page, but for example, if you wanted to highlight lines 4 & 12 of your PHP code, you could write this:

[php highlight="4,12"]PHP code here[/php]

Feel free to let me know if you have any issues using this plugin, or whether you have a better way of showing code in WordPress.