Just sharing some of my inconsequential lunch conversations with you... RSS  

Sunday, October 14, 2007

Format code snippets in blogs

In some browsers, the <pre> tag doesn't wrap. Well, that's probably by design, but nevertheless a nuisance. My code samples were just being cropped.

I've finally found a solution here, who had found it here. I just add the following CSS to my template:

.csharpcode, .csharpcode pre {
font-size: small;
color: black;
font-family: Consolas, "Courier New", Courier, Monospace;
background-color: #f4f4f4;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* 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 that's it! Naturally I had to do <pre class="csharpcode" >. I'm now considering applying the CSS to all the <pre> code in my template, for backward compatibility.

No comments:

Development Catharsis :: Copyright 2006 Mário Romano