Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.
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.
- > will become <
- < 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 > and <.
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.
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:
If you wanted to highlight PHP, for example, you’d type out [php]your php code here[/php] and save.
Saving this would produce a code box similar to this:
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.
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.