30 Dec

Displaying Code and Markup in Wordpress

Category: Uncategorized

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.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 Wednesday, December 30th, 2009 at 3:52 pm
Filed Under Category: Uncategorized
You can leave a response, or trackback from your own site.

0

Leave a Reply

You must be logged in to post a comment.