Thursday, April 15, 2010

Styling a pre tag

If you come to this blog once in a while, you had probably noticed that I change the theme of it quite often. This mostly because I'm still not quite satisfied with any of them. One thing that I find myself modifying in every theme is the styling of the "pre" tag. I like it to look similar to Linux shell and to wrap if code within is to wide. Here's the CSS I use to do that:

pre {
  border:1px solid #888;
  background:#111;
  color:#DDD;
  padding:5px 10px;
  margin:0 0 1em 0;
  overflow:auto;
}

Update: This version will actually wrap the text instead of adding scroll bars:

pre {
  border:1px solid #888;
  background:#111;
  color:#DDD;
  padding:5px 10px;
  margin:0 0 1em 0;
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap:break-word;
}