Showing Code In WordPress

How To Display Code Within A WordPress Post

| 7 Comments

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.

Categories: Plugins | Permalink

What next?

Hire me

If you couldn't quite manage this yourself, find it too intimidating, or just don't have the time to do it, you can always hire Dave to do it. Please get in touch so that we can discuss your needs.

Leave a comment

If you have a question, update, or comment about the tutorial, please leave a comment. I try and respond to every comment, though it may take a few days, so please check back soon.

Let a WordPress Expert help you

Do you want to try this, but feel like you need a helping hand, in case something goes wrong? My service, The WP Butler, gives you access to WordPress expertise whenever you need it. Better yet, I'll keep your site backed up, updated and secure, so that you don't have to worry about it. It's all part of the service. Use coupon DIWW and save 15% on all plans.

Visit The WP Butler

Author:

Dave has been tinkering with WordPress for many years, and he now shares his WordPress knowledge here on Do It WIth WordPress to help others realise its impressive power. He can also be hired to help with your WordPress needs. Dave, who is British, is married to his best friend, Marti, with whom he has a beautiful daughter, Ellie. When he's not dabbling with WordPress, he's probably eating Triscuits or hummus, watching an indie film or British TV show, spending time with friends or family, or exploring the world.

7 Comments

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

  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. This awesome post on how to create your first widget from the scratch. It would help new-comers a lots. Thanks for sharing it.

  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 https://gist.github.com/

Leave a Reply