Search this site:

2008-01-26

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.


No comments:

Post a Comment

HTML Tags allowed (e.g. <b>, <i>, <a>)

Disclaimer

ALL CONTENTS AND INFORMATION IN THIS WEB SITE ARE PROVIDED "AS IT" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED. THE ACCURACY AND AVAILABILITY OF THE CONTENTS, INFORMATION AND THE WEB SITE ITSELF ARE NOT GUARANTEED. THE AUTHOR TAKES NO RESPONSIBILITIES ON ANY COSTS OR DAMAGES (DIRECT OR INDIRECT) ARISING OUT OF OR IN CONNECTION WITH THE ACCESS, USAGE OR INABILITY OF USAGE OF THIS WEB SITE.