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 4 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.

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

Finally I use the WordPress shortcode with the SyntaxHighlighter plugin to display how the previous examples were created. The 2 examples show how customizable this tool 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.

These are the methods which I found the easiest to use with WordPress. 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 to new at this to find a workaround, but at least I have found acceptable solutions for my immediate dilemma.

Leave a Reply

Your email address will not be published. Required fields are marked *