ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Dipslaying Code In WordPress Posts

Last Updated on by

Sites that frequently publish code examples, such as tutorial sites, need an easy way to display code on their pages. Fortunately for WordPress users, there are several great ways to display codes in your posts. In this tutorial, you’ll learn about:

  • Manually displaying code
  • The WP Code Shield plugin
  • SyntaxHighligter Plus

If you run a tutorial site, or any other website that may require code examples, read on…

Manually Displaying Code

One of the problems most people face when trying to display code in their posts, is how to get it to not execute on the page. To do this, you’ll need to use character entities to replace the actual brackets.

  • &gt; will become <
  • &lt; will become >

Manually changing each little symbol like this can become a tedious task. Luckily, I’ve found a tool that can convert < and > to &gt; and &lt;.

WP Code Shield

This is a plugin which will take any code inside <code> tags and convert the brackets into character entities automatically. You can get the plugin here.

SyntaxHighighter Plus

If you want something more interactive than boring old code, then SyntaxHighlighter Plus is the plugin for you. You can download the plugin here. This plugin supports syntax highlighting in the following languages:

  • Bash
  • C++
  • C#
  • CSS
  • Delphi
  • Java
  • JavaScript
  • PHP
  • Python
  • Ruby
  • SQL
  • VB
  • XML/HTML

If you wanted to highlight PHP, for example, you’d type out [php]your php code here[/php] and save.

SyntaxHighlighter Code

Saving this would produce a code box similar to this:

SyntaxHighlighter Plus View

As you can see, this plugin produced a feature-filled code box with the ability to copy and print. Just a note, this plugin cannot be used alongside CodeShield.

Conclusion

As I browsed the WordPress plugin directory, it seems these aren’t the only WordPress code plugins available. Feel free to look around and see if another plugin better suits you.

If you don’t write code in your WordPress posts very often, you’d probably want to use one of the first two methods listed here. If you frequently post code examples, something like SyntaxHighlighter Plus will probably be more beneficial to you and your blog.

I hope you enjoyed this guide. Feel free to subscribe to the feed for more Theme Lab updates.

  • http://www.booto.net KimCool

    i use plugin

  • http://www.koolwriting.com/ PJ Brunet

    I think your screen-capture example there for SyntaxHighighter is misleading. Looks like you wrote some HTML in the visual editor and then switched to the HTML editor because I see escaped stuff like “lt”.

    The whole point of SyntaxHighighter is it escapes everything for you so you can simply paste working code into your HTML editor as is. There’s also a way to turn off the line numbers if you think they’re ugly.

    One problem with SyntaxHighighter, the “html” mode automatically marks up your code with links out to a reference website. To bypass this “feature” use the “xml” mode.

    I use it all the time, here’s a really basic example:

    http://www.koolwriting.com/todays-color-steelblue/

  • Leland

    @PJ Brunet: Yes, I took the screenshot of the code editor after I saved the post. After saving it turned the brackets into the character entities.

    By the way, would you mind sharing how to turn off the line numbers? I didn’t come across this feature while testing it.

    Thanks for the insightful comment.

  • http://hackwordpress.com Kyle Eslick

    If you paste it into the rich text editor, then switch to HTML/Code view it will convert it for you. Just FYI :)

    • http://themelib.com ThemeLib.com

      Yes, it is so simple :D

  • Leland

    @Kyle: Hmm..I never use the visual editor so wouldn’t know that. Thanks for the tip!

  • http://www.wplancer.com BANAGO

    I have been looking for such a plugin, but I have found to else. I do not use them, but I am going to use this for sure.

    Thanks Leland!

  • http://www.pjbrunet.com/ PJ Brunet

    All I can remember is this plugin has some quirks, it’s a hack of “GeSHi” which makes it kludgy, IMO. Maybe you can deactivate the plugin, go into the plugins folder and edit syntax_whatever.php and change these lines:

    $igSHOptionsArr = array(
    “ENABLED” => true,
    “PLAIN_TEXT” => false,
    “PLAIN_TEXT_TYPE” => “inbox”,
    “SHOW_LANG_NAME” => false,
    “PARSE_COMMENTS” => true,
    “LINE_NUMBERS” => false,
    “FANCY_NUMBERS” => false,
    “LINE_COLOUR_1″ => “#3A6A8B”,
    “LINE_COLOUR_2″ => “#26536A”
    );

    I’d dig around in the code more but it’s late and I’m falling asleep.

  • Pingback: WordPress Talk - July 15, 2008

  • Pingback: Dipslaying Code In WordPress

  • http://masterlesssamurai.com Wes (MasterlessSamurai.com)

    the SyntaxHighighter Plus plugin sounds exactly what im looking for. the only thing though, is the code shielded from execution? I mean, some spammer cant comment on my posts with real damaging code?

    • http://blog.sharedigest.com virtualTrader

      Yeah my wordpress is giving me errors – wont even let me post MySQL code !!

  • Pingback: Blessing Blog » Dipslaying Code In WordPress Posts

  • http://ianhade.freetzi.com ianhade

    i use this plugin, but when i change theme wp, syntax highlight plus not appear in my web. can you help me.

  • Pingback: Posting Source Code on Your WordPress Blog Posts | Zemalf

  • Pingback: Posting Source Code on Your WordPress Blog Posts | @Zemalf

  • http://www.thosecodes.com Zach (http://www.thosecodes.com

    WordPress 2.8 also lets you just type in the ” in the visual editor without it harming your actual body code. Also – for a list of HTML ASCII codes you can go to lookuptables.com

  • http://blog.sharedigest.com virtualTrader

    Have installed syntaxhighliighter but whenever I use in my post this:
    [sql]
    SELECT * FROM t1 WHERE 1;
    [/sql]

    I get error:
    ———————
    Forbidden

    You don’t have permission to access /wp-admin/post.php on this server
    ———————

    Please if someone has any idea how to overcome this SQL posting problem it is driving me crazy!!

  • http://nasirhayat.com Nasir Hayat

    Great! I was looking for such plugin to apply on my blog. Thanks. And i come across another great plugin to display
    code in your post, plugin called “CodeColorer” it can be download from http://wordpress.org/extend/plugins/codecolorer/ i am using this plugin on my own site. Best for code tutorial sites.

  • http://adamwadeharris.com Adam

    The one I found to work best is called SyntaxHighlighter Evolved. Others I found did nothing in my theme, but this one works great. http://adamwadeharris.com/wordpress-code-snippet-plugin/