Guest Post: How to Add Code Snippets to your WordPress Posts

Are you a programmer or website developer? If yes, you might want to share the code snippet to your WordPress posts. Perhaps you are showing a social ranking algorithm written in Python. Maybe you are demonstrating an HTML idiom. You could even be writing something as unusual as a PHP or WordPress tutorial! In any one of these cases, you want an easy way to display the code.

Of course, there is one very simple way. Just paste it into the visual editor (not the HTML editor) and it will do any necessary conversion of angle brackets, ampersands, etc. into HTML entities. If WordPress thinks it is HTML code, it will even wrap it in pre tags for you. Observe:

<div id="search">
 <form id="searchform" method="GET" action="/index.php">
 <input type="text" name="s" id="s" size="16" class="inputtext" />
 <input type="submit" value="Search" class="button" />

It works, but it isn’t the prettiest thing in the world. Now, you could go in and mark tag names in one color and attributes in another and plain text in a third and so. And you could do similar things for code snippets in other languages. You could do that, but it would painful. Luckily, you don’t have to thanks to something called GesHi. GeSHi stands for Generic Syntax Highlighter and it turns code into nicely styled HTML. Sweet.

Here is the same HTML block styled by GeSHi:

<div id="search">
   <form id="searchform" method="GET" action="/index.php">
     <input type="text" name="s" id="s" size="16"  class="inputtext" />
     <input type="submit" value="Search" class="button" />

There are several WordPress plugins that use GeSHi to format code snippets and I tried out three of them yesterday: CodeColored, Highlight Source Pro, and WP-Syntax.

They all work in about the same way. You put your code into your post, wrap it with special tags or shortcode, and let the magic happen. CodeColorer has the advantage when it comes to user-friendliness. Most of its options are set from a settings page in the admin interface, while the others depend on arguments on the wrapper tags. These include things such as width of the snippet block, maximum length of the block, whether to use scroll bars if the code is longer than that, etc. The settings page also lets you pick from a set of predefined color themes, which is convenient.

Highlight Source Pro takes almost the opposite tack. It has very few options (pretty much “do you want line numbers?”), they are barely documented, and they must be done inline as arguments to the wrapper tag. By any metric, CodeColorer has it beat petty handily. WP-Syntax is similar to Highlight Source Pro in terms of extras, but at least the features it has are clearly document complete with examples.

If this sounds like it was an easy victory for CodeColorer, it almost wasn’t. There was one problem; I could not get the indenting to work. For some reason, both CodeColorer and Highlight Source Pro blew away my indenting, leaving all my code slammed to the left. Only WP-Syntax behaved itself and left my code the way I wrote it. This is a make-or-break feature in my mind, so I resigned myself to using WP-Syntax.

Looking into it more closely today, I noticed that the indenting did work when I looked at it in Safari. Most of my readers use Firefox, so this didn’t solve anything, but it did lead me to the solution. It turns out that the indenting was fine all along, but a GreesMonkey script was killing it. Basically, the indenting was fine for everyone except for me in Firefox on this one machine.

In any case, I am using CodeColorer and am pretty pleased with it. For most snippets, I just wrap them with cc shortcode, providing the language of the code with the lang argument (e.g. [cc lang=”php”&93;). You do need to use the HTML editor instead of the visual editor, but switch between them is pretty easy (just click the appropriate tab).

If you need to show code snippets, give CodeColorer a look.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

    Facebook Comments


    'Guest Post: How to Add Code Snippets to your WordPress Posts' have no comments

    Be the first to comment this post!

    Would you like to share your thoughts?

    Your email address will not be published.

    Software development and outsourcing blog by QArea © 2017