Adding Code Snippets to Your WordPress Posts

© Chrisharvey | Stock Free Images & Dreamstime Stock Photos

From time to time, I’ll be including code snippets of various programming languages in my posts. And I thought you might find it interesting to know how these are being created.

There are a few different methods for creating and highlighting code snippets. We can refer to them as the <code> method, the <pre> method, and the plugin method.

And in fact, I used some special codes to write the <code> and <pre> in the previous sentence…but we’ll get to that in just a minute. Let’s start with the main methods for introducing code snippets.

The <code> method

Sometimes you just want to reformat text in a paragraph so that readers know you are referring to programming code. The easiest way to do that is to enclose the commands in <code> and </code> tags:

For example, in this sentence I offset the programming code command phrase by wrapping it in the appropriate tags.

Here is what I wrote as the underlying sentence:

For example, in this sentence I offset the <code>programming code 
command</code> phrase by wrapping it in the appropriate tags.

WordPress knows that the HTML tags (denoted by the < and >) indicate to change the text between them into a monospaced type that is typical of programming texts.

If you write a block of text using the <code> method, you will get monospaced type with a blank background:

set obs 500
gen x = rnormal()
gen y = 5 - .3*x + rnormal()
regress y x

The <pre> method

The <pre> method also converts your words into monospaced type, but it also add a nice grey background to highlight the code block:

set obs 500
gen x = rnormal()
gen y = 5 - .3*x + rnormal()
regress y x

What I actually wrote above is this:

<pre> set obs 500
gen x = rnormal()
gen y = 5 - .3*x + rnormal()
regress y x</pre>

No HTML coding inside <code> & <pre> tags

One drawback of the <code> and <pre> methods is that neither works with HTML tags inside the code block. Contrary to what other sources may say, the presence of HTML tags enclosed in < and > will cause your browser to follow the HTML commands. The tags themselves won’t appear.

For example, if I wrote the following code:

<pre>Here is the code to create a heading:
<h1>Level 1 Heading</h1></pre>

You would actually see:

Here is the code to create a heading:

Level 1 Heading

In order to show the <h1> and </h1>, we need to be able to show the < and > characters. This is done by typing &lt; and &gt; wherever you want < and >.

For example, to get the first code block in this section of the post I actually typed:

<code>&lt;pre&gt;Here is the code to create a heading: 
&lt;h1&gt;Level 1 Heading&lt;/h1&gt;&lt;/pre&gt;</code>

And, as you might have guessed, the code block you just read is wrapped in <pre> tags that you don’t see. I’ve been making extensive use of this little trick in this post.

The plugin method

The <code> and <pre> methods are relatively simple to implement once you get used to them. And they provide a clean and simple way to display programming code in a post.

But I like things a little fancier. I love developer software, and especially IDEs (Integrated Development Environments) that give line numbers and color-coded highlighting for the language you are using.

The easiest way to do this in WordPress is like this:

[sourcecode language="r"]
y <- duncan.model (prestige ~ income + education)
summary(duncan.model)
[/sourcecode]

Here I am writing code for the R statistical programming language. Hence, the option language=”r” tells WordPress how to highlight the text. The result looks like this:

y <- duncan.model(presitge ~ income + education)
summary(duncan.model)

Not only do you get line numbers, alternating shading, and highlighted code, if you run your cursor over the code block you will see several options to view the source code, copy to clipboard, or print the code. You might also note that the tilde is properly represented in the fancy code block, but looks much like a ‘-‘ sign in the basic formatting.

The [sourcecode] function can highlight several different languages. Unfortunately, if you are a Stata user code highlighting isn’t available yet. But you can still get the other options, by specifying language=”text”:

[sourcecode language="text"]
set obs = 100
gen x = rnormal()
gen y = 5 - .3*x + rnormal()
regress y x
[/sourcecode]

produces the following code block:

set obs = 100
gen x = rnormal()
gen y = 5 - .3*x + rnormal()
regress y x

This feature is available on WordPress.com blogs, and is based on Alex Gorbatchev’s program called SyntaxHighlighter. If you use WordPress on a different host, you can get the program as plugin.

Overall, these several methods for introducing code snippets should cover most of your needs. For more information on adding code to posts, see http://en.support.wordpress.com/code/posting-source-code/. And for more information on the SyntaxHighlighter plugin, see http://codex.wordpress.org/Writing_Code_in_Your_Posts.