

Awesome examples of CSS code box styling - wagerlabs

I'm trying to tweak my TypePad blog to make code examples stand out. I googled for "CSS code box styling" but didn't like anything I found.<p>What styling tips of examples would you suggest?
======
slater
font-family: monospace; background-color: #fff5c7; color: #000; padding:1em;
border:1px solid #ffe87d; line-height:1.5;

~~~
briansmith
It is better to explicitly list the fonts that best match the body text before
"monospace". Plus, I'd throw in Consolas and Andale Mono before "monospace"
too; usually the default monospace font is one of the worst the reader has
available to him.

line-height:1.5? That is too much even for body text set in Verdana. Coders
are used to code being set solid (line-height: normal or tighter). Too much
leading hurts the legibility of the code. In particular, since you have
padding:1em, a blank line in the code will have considerably more spacing than
there is between the code block and the prose.

~~~
slater
"It is better to explicitly list the fonts that best match the body text
before monospace."

What does that even mean? And I chose monospace only as not everyone has
Consolas or Andale Mono installed.

As for the line-height: I went for a balance between easy legibility and still
getting lots of text in the space. But I guess it's up to the OP to fiddle
with the spacing issues.

~~~
briansmith
You might have "Consolas, Andale Mono, monospace" if your body text is sans
serif (since Consolas is sans serif) but "Andale Mono, Courier New, monospace"
if your text is serif (Andale Mono and Courier New have serifs). I agree with
you that "monospace" has to be at the end.

------
noodle
<http://code.google.com/p/syntaxhighlighter/>

