If you post code on your WordPress blog, you could use a code beautifier plugin such as syntax highlighter or you could include your code in <pre> tags. They preserve line breaks, multiple blanks, tabs between words and other formatting commonly used in code. However, in some cases, if body of your blog is narrow(er) or your line of code is really long, it will not wrap and will overflow over your sidebar. You can just hide the overflow but that still will look tacky and not very usable. On performing a little search, I discovered that Tyler Longren had already come up with a clever hack to solve the problem. If you add the following code to your stylesheet, it will wrap the long lines of code.
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
Wow. This is very helpful. I didn’t know Mozilla has a property for word wrapping. Thanks!
valid CSS ?
nice hack!
interesting. i’ve always just applied a fixed width to
pre, and then usedoverflow: auto;so that it scrolls and makes the code available, without overpowering the layout.That’s what I do and prefer to do when I’m using pre tags to post code on my blogs (could be css, html, php or perl code) . In my opinion it presents the code in a more readable format.
I can however see a use for the css Mark posted. Especially when including larger snippets of text in a post and you don’t want to waste too much time styling it.
There’s a must more efficient way to present code: make sure lines don’t wrap, and give your code container an overflow property so that horizontal scrollbar gets in if needed. A line wrapping may be confusing when copying code.
pre { overflow:auto; }
The overflow works too, although some people don’t want the scrollbar. I do agree that I’d rather have the scrollbar when viewing code though because line-wrapping can get a little messy with long lines of code.
Very handy! Thanks for pointing that one out, I’ve had problems with cross-browser overflows before and wrote off ever finding a soultion to it
Nice tip.
Overall, I think I prefer the scrollbars, but that’s a personal preference. It’s nice to know the option is out there. 🙂
As for the commenter who said “make sure the lines don’t scroll”: How do you propose to do that? Considering people can resize the font, you can’t guarantee that unless you make the text and image.
Very useful, thanks a lot!!!