Home > Software Development > 2 Easy Steps to Add Source Code into Your Blog

2 Easy Steps to Add Source Code into Your Blog

WordPress is a great blogging software. I am very happy with it except that it does not have nice built-in support to include source code, which an absolutely needed feature for me.

Given the rich set of plug-ins WordPress has, I know there must be some plug-in there already. Today I spent a little time on research. After trying several plug-ins, I decided to use Google Syntax Highlighter for WordPress. You can check out how it looks like as follows.

Time to learn how to "Google" and manage your VMware and clouds in a fast and secure

HTML5 App

Thinking many other folks may be interested in having this in their blogs, I decide to share it. It’s also a reminder for me later on for adding source code.

The installation is pretty simple. First, click on the Plugins and then Add New. On the page, type in Google Syntax Highlighter for WordPress. You will get it as the first item in the result list. Just click on the install link at the end of the item. It’s pretty straight forward and I don’t need to repeat it here.

After you install it, you can see a little link “usage directions.” You can find much information and discussion there. Here is what I used for my post:

1. Add the following part with source code into the post editor HTML mode.

... Your Source COde ...

You can change the value of class to any others like cpp, css, xml, html, csharp, javascript, python, ruby, sql, etc. These are pretty much all I need. More can be found here.

2. Add the following part at the end of the HTML source.






It should be working after you save the page.

The trick part is the name attribute in part 1. Somehow after I saved it, I could not find it later. It might be caused by the switching of visual mode and HTML mode. In the end, I switched to HMTL mode and made sure the name attribute there for sure before I saved it. The highlighting doesn’t work if the name attribute is missing. So pay a little attention there.




  1. March 7th, 2010 at 02:38 | #1

    You might want to take a look at SyntaxHighlighter Evolved, which you can find at http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/.
    Just requires a simple start- and end-tag.
    And it also supports PowerShell, which of course convinced me 😉

  2. March 7th, 2010 at 12:45 | #2

    Thanks Luc,

    It looks simpler. How is the rendering speed? I found Google Syntax Highlighter sometimes takes seconds to render.

    -Steve

  3. March 23rd, 2010 at 02:24 | #3

    Just tried the SyntaxHighligher Evolved. It’s easier to use. So I switched to it. Thanks LucD!

    Lesson learnt: don’t take for granted things with Google keyword. It might be better without Google. :-)

    Tip learnt: want quick adoption by people? It might be better with Google. :-)

  1. No trackbacks yet.