Symetrik Domino Consulting

I have spent quite a bit of time figuring out how to make this blog easier to read visually. One thing I came up with is CSS to make the commands or code that I describe easier to pick out and easier to see due to formatting.

Here’s the CSS I used for the

 tag.  This will allow nicely formatted pre sections with your code or commands.  I opted to wrap the words for really long lines instead of using the horiztonal scroller.

I’ve tested this on Mac OS X with Opera, Safari, Chrome, and Firefox and it works great.
I like the added effect of the background and rounded corners as well.
pre {
color: white;
overflow-Y: hidden;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: black;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
_white-space: pre; /* IE only hack to re-specify in addition to word-wrap */
margin: 0px 0px 0px 0px;
padding:6px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

3 Responses to “Formatting code or commands on your blog with CSS”