Add Code Snippets to Your WordPress Posts

The likely first choice to display code samples on a WordPress blog would be to use the code element. But if you have tried this approach you know that it’s results are not satisfactory.

In my search for a way to exhibit code on my own blog I examined several other methods including plugins. Although I now have a preferred way to display my code, this post shows the top 4 techniques I found to help you choose. Each example here has its own degree of complexity.

The 5 approaches to displaying your code discussed here, 2 conventional HTML tags, 1 HTML form element and a WordPress shortcode (and plugin) are:

While of these methods work well, each has a different appearance and features. You decide which looks and works best for you. My choice for most code samples is the WordPress shortcode and the SyntaxHighlighter. I prefer not to install plugins if they really are not needed, but the SyntaxHighlighter is handy for my blog indeed.

HTML textarea form element

The textarea element is an HTML form component, but I thought it worth a try. The following example of a textarea with some code inside of it uses the attributes style=”color: green;” readonly=”readonly” rows=”4″ to add some optional formatting. It is a form element and I think that it should be left to that task.

If you are having an issue with HTML tags being automatically inserted into the textarea, for example <br> and <p>, place a pre tag around the textarea you can try these other options.

HTML pre tag

The HTML pre tag displays prefomatted text (preserving line breaks and spaces, etc.) It is used by many to effortlessly add code to webpages which can be further formatted with CSS settings. Adding the style=”overflow: auto; to the opening pre tag will even give you scroll bars as needed, but you must confine the text by setting a width or height smaller than the text display size. Otherwise the block will expand to display all of the text. The following C++ Hello world code uses the pre tag which also applies some optional formatting:

// A hello world program in C++

	#include
	using namespace std;

	int main()
	{
		cout << "Hello World!";
		return 0;
	}

Simple enough for simple code…

HTML div tag

The next example is a div displaying the Hello world code with an inner pre to add some optional formatting. The div also adds some formatting. The scroll bar(s) are added as needed by using the overflow: auto  property of the div.

 // A hello world program in C++

	#include
	using namespace std;

	int main()
	{
		cout << "Hello World!";
		return 0;
	}

 

Note that in the previous example of the div block the code’s tabs or line indentations will not be preserved unless you use the pre tag inside of the div block. This is different from using the textarea which required the pre tags to be outside of the textarea tags. Using the white-space: pre CSS property would seem to be better than using an embedded pre but it does not seem to work correctly in WordPress.

The last example, using the SyntaxHighlighter plugin, does this for you. As long as you remember to paste your preformatted text in the Text view of the editor.

You can further customize and automate your div block by creating a CSS class. This process is discussed in this post (which includes a free plugin.)

Shortcode with the SyntaxHighlighter plugin

Lastly, I use the WordPress shortcode with the SyntaxHighlighter plugin to display how the previous examples were created. The 2 following examples show how customizable this plugin is. The first example shows the output of the pre with the SyntaxHighlighter’s language set to HTML and line numbers starting at line 10:



<pre style="background-color: white; color: blue; font-style: italic;">

// A hello world program in C++

	#include
	using namespace std;

	int main()
	{
		cout << "Hello World!"
		return 0;
	}

</pre>

…and now the div example using the SyntaxHighlighter without the line numbers or the language syntax highlighted text (scroll bars are only added as need) :



<div style="height: 200px; white-space: nowrap; overflow: auto;">


<pre style="background-color: white; color: red;">

// A hello world program in C++

	#include
	using namespace std;

	int main()
	{
		cout << "Hello World!"
		return 0;
	}

</pre>
</div>

Just the line numbering and language formatting options alone make this plugin worthwhile, but there are many more ways to customize the output. The settings page of the plugin shows all of these parameters which are manually entered with the shortcode, somewhat like inline CSS. I do find the line gutter color a bit garish, and I am looking into a way to change that. Another good feature is that any code you enter inside the block is encoded for display so that you need not worry about foreign code ruining your page.

As you can see in the last example, this tool can be used for ordinary text, by simply omitting the “language” setting. Though for plain text I would probably use a div block, if I required scroll bars and a pre block if not.

The Enlighter plugin

This plugin is more complex and requires a little more help to get it going.

These are the methods which I found the easiest to use with WordPress. My choice is the SyntaxHighlighter. It is simple and, as far as I am concerned, only lacks the ability to set the height of the displayed code window. The HTML code tag caused me a lot of trouble which came from the WordPress editor continually encoding (or not) some characters. Maybe I am still too new at this to find a workaround, but at least I have found acceptable solutions to my immediate dilemma.