CSS for code block

If you're wondering how do I actually get the nicely boxed code block in my blog as this;

then the answer to it is just to have this in my CSS:

pre {
        padding: 10px 15px;
        margin: 5px 0 15px;
        border-left: 5px solid #666666;
        background: #222222;
        font: 1em/1.5 "Courier News", monospace;
        color: #bbbbbb;
        overflow : auto;
}

and later I would just wrap whatever text I want to be in the box with the pre tag in my HTML codes, like this;

<pre>
This is a code example
</pre>

and should get this output (including the dashed-box):

This is a code example

and that's all. It's just so easy..

Tags: html

This entry was posted on Wednesday, December 26th, 2007 at 9:04 pm and is filed under Information Insemination. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.