Friday, 25 July 2008

How do i get code to display in my blog without text going bizarre

Use the
<pre>
tag :)

Added this to my stylesheet of the blog template

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+ */
}

and then anything like code can go in <pre></pre> tags and will be left alone by the browser.

3 comments:

antonyh said...

It's even more friendly if you use css overflow:scroll; - that way lines don't wrap and you get scrolly bars. Easier to read!

Martin Evans said...

Hi Adam, if you use Windows Live Writer to publish to your blog, there is a code snippet plugin you can install which puts all the formatting you need in. You can even stipulate the type of code you're displaying. and it will format it appropriately. I just used it on my blog.

Adam Hicks said...

Fair point - now updating my blog :)