Welcome Back. I see you've found you're way to page 2. Awesome.

On this page: Dan Cederholm, Jonathan Snook, and Steve Smith

Simplebits

I was going to do a section on Simplebits and Dan Cederholm's version of the <code> tag, but it turns out his is very simple. Actually, the majority of his work is in the HTML, since tabs his elements using the HTML tab entity. You can take a look below.

dan cederholm

And the CSS:

code {
     color: #963;
     font-family: Monaco, monospace;
     font-size: 120%;
     text-align: left;
     
}

Snook.ca

Jonathan Snook is another web design superstar, like Dan Cederholm, but unlike Cederholm, his styling for the <code> element is actually interesting. Here it is:

jonathan snook

And here is the CSS (Cascading Style Sheets) he uses:

.snook code {
     color:#333;
     }
pre {
     background:#F4F4F4 url(../img/v8/bg-code.png) no-repeat 0 0;
     width:480px;
     padding:10px 20px;
     }
pre code {
     display:block;
     overflow:auto;
     width:460px;
     white-space:pre;
     min-height:3.5em;
     }
* html pre code {
     height:60px;
     
}

As you can see, Snook is the first one to use an image out of the example's we've looked at so far. He opens with a <pre> tag, applies his background image to that, and then proceeds with everything else we've seen so far, like making the code a block element, fixing the <pre> overflow problem with overflow: auto, padding, widths and heights, and typography (he changes the color of the code). The white-space tag makes white-space be preserved by the browser.

Ordered List

Steve Smith of Ordered List fame takes us out with a bang by bringing a new and effective way to pretty up your code. Check below for a screenshot from his website.

stevesmith

Here is Steve's effective but short CSS.

code {
background:#171B20;
padding:1px 2px;
font-size:92%;
color:#EEE;
font-family:Monaco, “Courier New”, Courier, mono;
}

All Steve does is change the background color (specifically to the same one as his site's background), add the necessary padding, and change some typography. But notice how he doesn't put display:block. This is so he can also use his <code> tags inline, like I just did. When he wants to move his code out to a separate paragraph and give his code the display:block effect, he uses the <blockquote> tag to make it a block. Brilliant!

I hope you've gotten some inspiration at the very least from this article. You learned how to display your code in your blog here, and now you know how to dress it up. Good for you. If you have any questions, contact us here, or leave us a comment.

Pages: 1 2