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.
pre {
height: auto;
overflow-x:scroll;
}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.
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;
}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:
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;
}Additionally, let’s specify the code tag font when its wrapped in the pre tag:
pre code{
font:16px Monaco, 'andale mono', 'lucida console', monospace;
color:#373737;
}Finally, we need to specify what our code tag font is, when it’s included in a paragraph:
code{
font:14px Monaco, 'andale mono', 'lucida console', monospace;
}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.
Related Media
Comments
10.16.09
… I also find myself torn between the coffee shop and my dual monitor setup
11.04.09
May I suggest ABR Viewer as an alternative to loading and trying each brush in Photoshop? It’s free, and I use it regularly. You may find this a great time-saving alternative!
http://abrviewer.sourceforge.net/
Hope it helps!
11.04.09
Thanks for the referral, Cyndi! I’ll have to spend some time tonight trying it out.
02.11.10
I love you to pieces man!!
10.14.10
I wished and wished for a Mac, then was given one at work.
So I moved all my files over.
I HATE it. I’m a designer. I have about 50 folders for 50 different projects. I name the banner psd “banner.psd” for all of them. Try and search for them all, yeah the Mac finds them but then you have to do “get info” for each one (or change some such setting and still click on each to see where the dang thing is located. On windows. I glanced at the path to the folder and voila. Yeah changing permissions on Vista is a headache but it’s far better than the constant problems I have on the Mac. Photoshop is twitchy at best, the thing crashes, although my Roku, PS3, Wii, personal laptop all do fine with my wirless, the mac drops it all the time. I use multiple monitors. Oh my god what idiot thought of leaving the application menu on one screen when the application is on another? You can only choose one little sprout because Steve Jobs knows better than you how you should work.
can’t wait to ditch it.
sorry tirade over.
ps tons of free windows applications out there.
11.26.10
Um… how about not naming all of your files the same name? Sounds more like an organizational issue than an operating system issue, either way.
I might recommend using an identifier and THEN _banner.psd? I assume it’d be difficult to find photos as well if every picture on a drive had its own folder and was named “photo.jpg”.
Examples:
Projectname_size_banner.psd
Clientname_size_banner.psd
etc…
04.17.11
Ok, so… I’m a total newbie to photoshop. I have CS5 and a brickton of brushes. I have tried renaming them, but they do NOT show up in the list like I want them to. I’ve played around with it for like a half hour. Can anyone please help?