How to embed source code in a blog

April 15th, 2008

To embed source code inside blogger blog, like in the picture above, I use a css box like below:

.code {
    font-family: ‘Courier New’, Courier, monospace;
    white-space: pre;
    line-height: 1.4em;
    margin: 1em 0;
    border: 1px dashed #aaa8a8;
    padding: 0.5em 0 0.3em 0.5em;
    font-size: 100%;
    color: #000;
    overflow: auto;
    max-width: 100%;
    /*max-height: 400px;*/
}

To use it just call the class named ’code’ using div.

<div class="code">The source code goes here!</div>

The tab will be preserved. In order to limit the height of the box, remove the comment (”/*” and “*/”) from the last line, and set the desired height.

/* max-height: 400px; */

For some reason, in IE, the text will be wrapped instead of displaying the scroll bar. However, it works just fine inside Firefox and Opera. If you have suggestion on how to solve this problem, don’t hesitate to leave a comment.