Sunday, January 21, 2007

CSS FTW

Kam Dahlin asked about my code formatting for the NSViewAnimation post, and I was embarassed to report that I had no special css style for it. So, my friend Mitch stepped up and handed me this:

.source_code, li .source_code {
padding-left: 2px;
border-left: 1px solid #666;
font: 100% Monaco,monospace;
font-size: 8pt;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}

/* change this line to set the width of box */

.source_code {
width: 100%;
}

/* change this line to set the width of box in a list */

li .source_code {
width: 100%;
}

Stick that in your css file, and invoke it by surrounding the code text with <div class="source_code"> and </div>. You still have to detab the code first, but it beats the hell out of some &nbsp's. Also note that Blogger will not display the style when you preview a post- you have to submit the post to see it.

Update: Use "pre" instead of "div" and all is well. I can fly through asm but html is a black art to me. Non-thanks to all who failed to correct me earlier :P

No comments: