Categories
Blogging Tutorials

Posting Source Code on WordPress

I’ve posted a lot of non computer science blog posts recently, but this is supposed to be “the blog of a budding computer scientist!”. So here’s a post which I hope will help a few of my fellow computer science bloggers who use the WordPress blogging platform — which by the way is fantastic.

Quite often when I see blog posts that contain source code it’s formatted in an annoying way, doesn’t have any colour coding or in a worst case scenario is a screenshot of an IDE. It’s impossible for people to copy your code if you take a screenshot of it, and in my experience if you post your code online you want people to copy and adapt it for their own use.

On wordpress you could use <pre> tags in the HTML editor to make code boxes like the following:

//Here's some <pre> formatted code
public static void Main()
{
      Console.WriteLine("Hello WordPress");
}

Thats all well and good, it keeps the code seperate from the content of the blog post and gives it a different font and background colour to differentiate it as code, however those of us who are used to working in an IDE, such as Visual Studio, with its syntax highlighting may find it less friendly to read. This is where one of WordPress’ best features comes in.

The [ sourcecode ] tag allows you to post fully colour coded source code in a variety of languages including C#, C++, JavaScript and XML. It also adds some other features like line numbering,  code printing, copy to clipboard and view source — It looks like this:

//Here's some [ sourcecode ] formatted code
public static void Main()
{
      Console.WriteLine("Hello WordPress");
}

Much better!

All you have to do is wrap your code like so

[ sourcecode language="LANGUAGECODEHERE" ]
          //Code here
[ /sourcecode ]

Without the space in front of sourcecode (Which I’ve had to put to prevent WordPress from actually making it into a source code box). You then have to replace LANGUAGECODEHERE with the code corresponding to the programming language you are posting:

  • C#’s code is “csharp”
  • XML’s code is “xml”
  • PHP is “php”
  • Java is “java”

You can see all 29 codes at this helpful wordpress help page.

I hope this helps a few of my fellow CS bloggers! 🙂

Danny