Adding Code Blocks Using CSS

Mmm, that's good code.

Adding code blocks to your blog makes it easier for your readers to decipher content from code. There are a wide rage of solutions ranging from simple CSS boxes to JavaScript libraries like Syntax Highlighter that perform on the fly client side syntax highlighting for a multitude of languages.

I chose the former due to its simplicity. If I end up posting a lot of code on this blog I will consider a JavaScript Library. Here is an excerpt from the global.css file that is used on this site to create a code block:

.postCode{
	background:lightyellow none repeat scroll 0 0;
    	border:1px inset orange;
    	margin:10px;
	overflow:auto;
	padding:6px;
	text-align:left;
}

Here is an example of how to use the above code:

<pre class="postCode">
	<!-- content here -->
</pre>

Add your comment

No HTML. Line breaks and URLs will automatically be converted.