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.
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.
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.
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://themelib.com/2008/08/te ch-junkie-blogger-template/
i use plugin
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/
@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.
If you paste it into the rich text editor, then switch to HTML/Code view it will convert it for you. Just FYI
Yes, it is so simple
@Kyle: Hmm..I never use the visual editor so wouldn’t know that. Thanks for the tip!
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!
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.