Displaying a Code Block

Here’s a challenge… the WordPress “Add New Post” page that I’m currently using to type this post into has a button labeled “code“. If you select a chunk of code (such as the CSS I’ll put later) it wraps the <code> and <\code> tags around it. Depending on the CSS you have mapped to the code tag, you will get a nicely displayed piece of code in your blog. But there’s a catch; you can’t get a solid box/background just by using the default code tags. You need to add the <pre> and <\pre> tags as well….

I had thought that just using the code button I’d be able to achieve a nice box with the monospaced code in it. If you try to use a background colour or borders with just the <code> you will get the background/border for just the text.

I spent ages trying different CSS code to get a solid box.

Then I investigated a number of WordPress blogs and the WordPress.org site itself. They all used the <pre> and <\pre> tags wrapped around the <code> and <\code> tags. Sure enough it works!

Here’s the CSS I’ve been using displayed using the very <pre>, <\pre>, <code> and <\code> tags mentioned:

/* Expecting all code tags in posts to have pre wrapped around them */
pre {
	font-size: 1.2em;
	line-height: 1.25em;
	background-color: #F8F8F8;
	border: 1px solid #EEEEEE;
	padding: .5em .5em .5em .5em;
	margin-bottom: 1em;
	font-family: "Courier New", monospace;
	overflow: auto;
}

I didn’t need to add anything for the code tag in the CSS file.

So it makes me wonder why this editor only has a code button and not a pre button or a pre+code button.