Styling preformatted text blocks is one of the more difficult tasks
when customizing a blog. In truth, many bloggers may never need to use
preformatted text at all, but if you plan on posting code snipits, using
this technique is a must.
When you post large blocks of code on your blog you will probably be
using the <pre>,<code>, your code
</code>,</pre>, format. By doing so you are turning the code
block into monospaced type with the code tag, and wrapping the entire block in a command to maintain its preformatted state. This technique, in combination with a code snippet plugin like Code Autoescape will deliver a functional, though at times, unattractive result. How to style those pre tags?
When you keep the preformatting of a block of code, you are in effect
keeping all of the white-space and line-break formatting intact. This
means that, while your blog’s content area may be 500px across, if the
line of code runs to 800px your theme will likely break, or the code
will overlap your sidebar. This is absolutely devastating to the clean
lines and careful detail you have put into your blog’s custom look.
Many WordPress themes, in fact many website designs, use overflow-x:scroll;
to add a horizontal scroll bar to the preformatted text area. This, by
the way, is what I did on both the Slate and Paisley themes. It works
fine, and with made for release themes, I think it’s the best option.
That doesn’t mean that there aren’t any options to spiff up the look of
these snipits. Let’s take a look at some way to do it.
This is the stylesheet code from the Slate theme.
<code>pre {
height: auto;
overflow-x:scroll;
}</code>With the pre tag styled in this way we get a preformatted text area that looks like this:
Let’s replace overflow-x:scroll; with some white-space and word-wrap values.
<code>pre {
height: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}</code>The pre-wrap value and the variations included in this
stylesheet block specify that lines of code should break as necessary to
fit within the containing element. In addition, the word-wrap value break-word
specifies that, when necessary, unbreakable words may be broken so the
text will fit in the box. Now we have everything fitting within our
content area. Unfortunately, it looks a lot like the paragraph text:
To fix this, let’s add a background color, padding, and change the
font around. With the Slate theme, we need to make a few changes to the
style sheet. We are going to add padding and a background to the pre tag like this:
<code>pre {
height: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
padding:15px;
background: #459dcb;
}</code>Additionally, let’s specify the code tag font when its wrapped in the pre tag:
<code>pre code{
font:16px Monaco, 'andale mono', 'lucida console', monospace;
color:#373737;
}</code>Finally, we need to specify what our code tag font is, when it’s included in a paragraph:
<code>code{
font:14px Monaco, 'andale mono', 'lucida console', monospace;
}</code>This is the final result:
You might notice in the image that WordPress in the first line is wrapped with a code tag to show the code style when used in a paragraph.
Depending on the look you are going for, you might try stripping out
the background color all together and enlarging the font, or try messing
with the background color. There are endless possibilities.
source : http://www.arsgrafik.com/text-break-pre-tags/
