How To Display Code Within A WordPress Post

UPDATE: I now prefer Crayon Syntax Highlighter as my method of displaying code on WordPress sites. Please see my write-up of Crayon Syntax Highlighter instead.

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):

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

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:

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.

7 thoughts on “How To Display Code Within A WordPress Post”

  1. Sourav says:

    How will the code area look like? Will it be something like he examples you have given?
    My recent post How To Get 30 Comments On A New Blog

    1. daclements says:

      It can do. The plugin comes with seven or eight themes to choose from. This is just the one I prefer the most.

  2. It is true there are blogger that wants to put some codes to their blog but unfortunately there are problems that are occurring. in that case, if the plugin maybe effective, why not, as long as you can do whatever you intend to do like putting some codes. nice article.
    My recent post ROR Sitemap for http-wwwcaliforniaduihelpcom-

  3. rakesh kumar says:

    This awesome post on how to create your first widget from the scratch. It would help new-comers a lots. Thanks for sharing it.

    1. Thanks Rakesh, I hope it does; I tried to make it as easy-to-follow as possible.

  4. I’ve been using the same Plugin and it’s been working well for me. As I start to move more of my projects to GitHub, I have been teased to try their github:gist service at

    1. I see that they have embed codes. Do they also have a WordPress plugin to facilitate embedding/displaying code?

Leave a Reply