Archive for December, 2009

Displaying Code and Markup in Wordpress

Wednesday, December 30th, 2009

Desiring to find a clean and elegant method of display code and markup in blog entries, I researched the various plugins at wordpress.org using the “code” term. Most seemed to be either simple (just escaping markup) or complex (syntax highlighting with GeSHi). What I really wanted was just a way to display formatted code in a clean, visually-appealing layout. I eventually settled upon the simple markup plugin Code Markup coupled with some CSS. The following is an excerpt from my Wordpress CSS and an excerpt from this blog entry demonstrating the use of the plugin and CSS.


CSS

div.code {
        overflow: auto;
	border-style: dashed;
        border-width: thin;
        border-color: black;
	background: #FFFFFF;
}

pre.code {
	font-size: 0.8 em;
 	color: black;
	margin: 10px;
	padding:10px;
}

code {
	font-size: 0.8 em;
        font: Courier;
        color: black;
}


How the above CSS block looks in this blog entry.

<div class="code">
<pre class="code">
<code markup="none">

div.code {
        overflow: auto;
	border-style: dashed;
        border-width: thin;
        border-color: black;
	background: #FFFFFF;
}

pre.code {
	font-size: 0.8 em;
 	color: black;
	margin: 10px;
	padding:10px;
}

code {
	font-size: 0.8 em;
        font: Courier;
        color: black;
}

</code>
</pre>
</div>

Posted in Uncategorized | No Comments »