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.