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

Advertisements

Tags: , , , , , ,

2 responses to “Posting Source Code on WordPress”

  1. alexprodgers says :

    Useful cheers, I’ve been meaning to look up how to make these in WordPress but you just saved me the job!

  2. etschneider says :

    I should admit I am a little bit lazy and rely on Windows Live Writer for that.

    Though that may change if I’ll use the app on Windows Phone.

    Thank you and go on like that!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.