Saturday, February 14, 2009

Blogger/Blogspot Code and Blockquote Formatting

If you want to have a scrollable, styled <pre/> or <blockquote/> There are many other ways of doing it, but here is one:
pre, blockquote {
  white-space: pre;
  margin: 5px 0px 5px 5px;
  text-align: left;
  border: 1px solid $bordercolor;
  font-size: 1em;
  font-family: monospace;
  margin: 10px;
  line-height: 13px;
  background-color: $footercolor;
  padding: 3px 0px 3px 3px;
  overflow: auto; 
}
The critical pieces are the "white-space: pre;" which makes it act as a normal pre tag and line-break and the "overflow: auto;" to keep the text from exceeding the right border by making it scrollable.

No comments: