Posting codes in Blogger

I have just added some CSS modified from here (in Traditional Chinese) for to make codes looks better in Blogger.

/* .post-body is element in the template i am
currently using, you may want to replace it or
even remove it when applying to your site */
.post-body code  {
 display: block; /* fixes a strange IE margin bug */
 font-family: "Courier New", "Monospace";
 font-size: 8pt;
 overflow: auto;
 background: #eee;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 max-height: 300px;
 max-width: 100%;
 line-height: 1.2em;
}

Then, put all your codes between <pre><code> and </code></pre> tags. For examples:

<pre><code>foo.bar();</code></pre>

The <code> tags is for CSS styling and the <pre> tag is for preserving white spaces, keeping the indentations. You may wonder why I do not use <pre> tag only, by giving it a class attribute and directly apply CSS style to it, like:

.post-body pre.code  {/* something here */}

and the block likes this:

<pre class="code">foo.bar();</pre>

This should works too, but the reason I prefer the keeping the <code> tag is indeed simple: I would like to keep the semantic meaning for the content.

Just a reminder, you should also do the following replacement to avoid problems, note that the & has to be replaced first:

• & to &amp;
• < to &lt;
• > to &gt;

If you use some code highlighter like the Actipro CodeHighlighter I am using, probably it will help you to handle the conversion too. You may find the service at here and here, it's free.