Styling the 'pre' tag in Blogger's 'Dynamic Views' template

If you are using Blogger's Dynamic Views template, and are also using the 'pre' tag in your posts, you'll notice that the content enclosed in your pre tags will not be showing as expected.

Below is an example:

No appropritate styles added to the 'pre' tag by default.

This is a simple CSS fix. To add the CSS goto the 'Template' page in your blogger admin area, and click on the 'Customize' button.

From there click on 'Advanced' then on 'Add Css'.

Dynamic styles customization area.

Add the following custom CSS:

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

(The above CSS is taken from Twitter Bootstrap, http://twitter.github.io/bootstrap/)

Finally click on 'Apply to Blog' (button in top right corner).