Awesome examples of CSS code box styling

https://news.ycombinator.com/item?id=258951

by joelreymont • 18 years ago

1 5 18 years ago

news.ycombinator.com

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.

What styling tips of examples would you suggest?

slater2• 18 years ago

font-family: monospace; background-color: #fff5c7; color: #000; padding:1em; border:1px solid #ffe87d; line-height:1.5;

briansmith2• 18 years ago

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.

slater2• 18 years ago

"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.

noodle• 18 years ago

http://code.google.com/p/syntaxhighlighter/

Awesome examples of CSS code box styling

Related Stories