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!

Unknown 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 :)