Code posting in Blogger

If you've tried posting code in blogger, you have faced the same frustration as I have. Basically blogger munges the </br> tag so very nicely that you are left wondering what is happening. If that wasn't enough it does not offer a simple css style class to format a particular code. The situation doesn't improve if you try to use text area. The size of the text area need calculation. Not good. You have two options at this point :

1. Use SyntaxHighlighter. The downside to this - some random language would need a separate style sheet.
2. Define a body pre.code { style in the blogger template and use the <pre class="code"> in the actual source

I have defined the option 2 and the result looks as below :

 some random piece of code I want to paste. And any language !

To get the above effect you need to define two things :

1. Variable

   <Variable name="codefont" description="Blog Code posting Font"
   
               
   type="font"
   
               
   default="normal normal 110% , Monospace"
   
    value="normal normal 110% , Monospace">
   

2. The actual style definition

   body pre.code {
     margin:1em 0.8em 1em 0.8em ;
     padding:1em 1em 1em 1em;
     line-height:1.6em;
     font:$codefont;
     border:2px dotted  green;
   }
   

The downside ? You still have to use the proper html equivalents for < > . :(

This can be alleviated by doing a replace in any text editor for the < and > symbols and paste the converted html to the "Edit Html" box of blogger. You could even use txt2html if you use Linux ( Am using Ubuntu ).

Hope this helps.