Skip to content

How To Display Code Within A WordPress Post

07 August 20103 comments Code, Plugins, Video Tutorials

Showing Code In WordPress

Showing Code In WordPress

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:

[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.

Related posts:

  1. Using Anchors in WordPress
  2. 10 WordPress plugins that every website needs… and others that may come in handy
  3. How to Post Links to Tweetie Quickly and Simply From Your iPhone
  4. Post your Facebook Status Updates to Twitter automatically
  5. Watching the BBC iPlayer outside of the UK, safely and reliably

About the Author

Dave Clements designs awesome websites in his spare time, along with eating Wheat Thins, spending time with friends and family, watching Indie films and playing with his array of Apple products.

Like it? Share it!

Tweet this!Share on FacebookStumbleUponDigg This!

Comments

  1. Sourav September 3, 2010

    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

    • daclements September 3, 2010

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

  2. California DUI September 10, 2010

    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-

Add a Comment

Required

Required

Optional

CommentLuv Enabled
Site map WordPress Tutorials by Do It With WordPress News