4 ms·
Awesome examples of CSS code box styling
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?
- slater 18y agofont-family: monospace; background-color: #fff5c7; color: #000; padding:1em; border:1px solid #ffe87d; line-height:1.5;
- briansmith 18y agoIt 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 18y 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.
- briansmith 18y agoYou 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 18y agohttp://code.google.com/p/syntaxhighlighter/ http://code.google.com/p/syntaxhighlighter/