Matt's Blog

Code Highlighting in WordPress

September 10th, 2007 at 11:15 AM (10 years ago) by Matt Freedman

Have you ever wanted to post some code onto your WordPress blog, but then quickly get frustrated when it gets formatted properly? I have, a lot. I also wanted syntax highlighting. To try to solve these problems, I was using WP-Syntax. Sure, it did syntax highlighting, but if you wanted the code to be presented well, you had to do some CSS magic, and I still got frustrated when my code got formatted.

Well, WordPress.com solved this problem. They made it easy to do, presented the code well and your code doesn’t get formatted. Oh, sure, but what about self-hosted WordPress blogs?

Well, it wasn’t long before somebody made a plugin for self-hosted WordPress blogs that did exactly the same thing. Viper007Bond threw together a plugin that did what WordPress.com blogs could do. Then, Matt Mullenweg saw Viper’s post and said that they should work together, and sent over the code he was using on WordPress.com. That’s how the WordPress plugin SyntaxHighlighter was born.

To use it, you just wrap your code in [sourcecode language=’lang’] and [/sourcecode] tags. Where lang is, would be one of the following currently supported languages:

  • cpp
  • csharp
  • css
  • delphi
  • java
  • jscript
  • php
  • python
  • ruby
  • sql
  • vb
  • xml

You can also use source or code instead of sourcecode, and lang instead of language. You can even not type in language or lang. So, the shortest would be [code=’lang’][…][/code].

The visitor is then presented with a clean little box with the code in it. The code is highlighted, there’s line numbers, the visitor can view the code in plain text (no highlighting), copy the code to the clipboard and print the code. Here’s a live example (click here if you’re reading this as a Feed):

<?php
if ($x == "1") {
echo "1";
}
else {
echo "2";
}
?>

It uses Alex Gorbatchev’s SyntaxHighlighter to highlight and present the code front-end using JavaScript. Which also means, that it will degrade nicely if it’s being read in a Feed, or if the visitor doesn’t have JavaScript on/doesn’t have a browser that supports JavaScript.

It’s a great plugin that does what it supposed to do, and does it well. Check it out, if you like to post code on your WordPress blog, without any hassles.

2 Responses to “Code Highlighting in WordPress”

  1. Affordable Blog Hosting
    Affordable Blog Hosting says:

    […] adding some of the must have WordPress plug-ins to our install of our Managed Blog Hosting. Blog hosting – Have you ever wanted to post some code onto your WordPress blog, but then quickly get frustrated […]

  2. An Alternative proxy script to host your WordprssBlog anywhere else « el NiNo
    An Alternative proxy script to host your WordprssBlog anywhere else « el NiNo says:

    […] of execution it yeilded a bit slower than Hasin bhai’s script. I have added the main proxy syntax highlighted […]

Leave a Reply

Quote selected text

Leave the following field empty: