Formatting code on a WordPress.com site

I was recently reading an article by Scott Hanselman entitled How to Post Code To Your Blog and other Religious Arguments. In this post he describes the best way to show your source code on your developer’s blog. Many of the examples relate to using the excellent tool Windows Live Writer (WLW). This application allows you to compose and manage your blog posts. You can import your WordPress theme, write your story, add images and preview how it will look all while you are offline. You can then choose to post a draft to WordPress for final tweaking (something I highly suggest) or you can Publish directly to your blog.

In the article Hanselman talks about the fact that you will probably want to add some code to your blog post to illustrate your article and mentions you could just copy your code right into your HTML. However, it will not have any of the color theming most IDEs incorporate. This will make the code harder to read. He then talks about using some of the syntax highlighters that are available. You can import the highlighters into WLW and the code will appear much like it does on your IDE. However you will need to also use a JavaScript file on your website so that the code can be rendered correctly there as well.

This process will work for any WordPress.org site since you have full control over the code and where it is hosted. With a WordPress.com site though you are limited in how much you can manipulate your blog theme and the posts within it. This includes the fact that you cannot append any sort of scripting file to your site. You can read more about what types of code WordPress.com allows on this support page.

You might be thinking about just inserting images of your code instead of playing around with formatters. This is something I used to do and I found it a much easier process. However I also find it very frustrating when I visit other blogs and I find a code snippet I need that turns out to be an image and not text. Typing this out just adds to my frustration. As Hanselman states in his article placing code as images “…is rude to blind folks, and not useful as GoogleBing can’t see it. Don’t do this. You’re a bad person.” The point about having your code indexed on Google and Bing is especially poignant as you want people to be able to find and use the examples you constructed to illustrate your blog post.

So are we stuck with having unformatted code in our WordPress.com blogs then? No – there is a solution. As part of Alex Gorbatchev’s SyntaxHighlighter project much of the source code formatting used in the WLW plugin and accompanying JavaScript file has found its way into WordPress.com. The sourcecode formatting shortcode can be wrapped around sample code to preserve its formatting and provide syntax highlighting for certain languages. By wrapping your code like this:

[sourcecode language=”csharp”]
RadioButton GetCheckedRadio(Control container)
{
foreach (var control in container.Controls)
{
RadioButton radio = control as RadioButton;

if (radio != null && radio.Checked)
{
return radio;
}
}

return null;
}
[/sourcecode]

you will see output like this when you post your article:

 RadioButton GetCheckedRadio(Control container)
 {
 foreach (var control in container.Controls)
 {
 RadioButton radio = control as RadioButton;

 if (radio != null && radio.Checked)
 {
 return radio;
 }
 }

 return null;
 }

The [soucecode] language attribute can be used with multiple programming and scripting languages including C#, CSS, Erlang, HTML, JavaScript, Java, Perl, PHP, Python, Ruby, SQL, VB, XML and many others. If you leave the language blank then the code will default to plain text with no highlighting.

There are also some configuration parameters you can use to display your formatted code including changing the line numbers, collapsing the code window upon form load and disabling line wrapping. You can also choose to hide the toolbar that displays on mouseover. This toolbar allows your users to copy and print your formatted code.

Note: Placing the sourcecode shortcode tag in your WLW post for publication may cause display issues with your code once posted. Do not trust the Preview tab in WLW since it might not be reflective of your published article. Instead click the Post draft to blog button and perform a final clean up within the WordPress editor.

Finally, the [soucecode] tags will format and display your code exactly how you post it on your blog. So make sure your line spacing and indents are how you like them before you publish.

If you are a WordPress.com user and regularly post code to your blog I suggest you check out the [soucecode]shortcode. As you can see it is not a lot of work to make your code snippets accessible to all users. I and other developers will thank you when we visit your site.

Advertisements

About Ken Cenerelli
I am a Programmer Writer, .NET Developer, Microsoft MVP - Visual Studio and Development Technologies, Public Speaker, Blogger, and Microsoft Azure Nerd. I blog regularly at kencenerelli.wordpress.com and can be found on Twitter via @KenCenerelli.

2 Responses to Formatting code on a WordPress.com site

  1. Maverik says:

    Nice post..
    Also found a nice eclipse plugin to directly copy code as HTML from eclipse IDE.

    http://java-sample-program.blogspot.com/2012/12/copy-as-html-eclipse-plugin.html

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: