Display HTML / JavaScript code in Blogger - How to

In my last post about How to add Digg to Blogger I was struggling with how to display html code on my page. Showing code in those beautiful boxes without disturbing the layout / indenting was easy but tricky. You need to know css / html and that the Blogger does not support unescaped code. Also to maintain consistency among all this boxes, is another issue. So here is what I did.

Lets have a look first at the box I am talking about.


So the question remains, how to get it?

Easy... just follow this steps.

As blogger wont take html code as it is... meaning you will need to convert it into escaped code. For that get the code you need to any text editor. Then replace all the < signs with &lt; and all > signs with &gt;. Now copy this escapped code to your blog. There is another easy way to do it. Go to this site -> Text -> HTML Entities Encoder. There are two boxes, copy your code into first box. The escaped code will be generated in the next one. Easy isn't it.

Now how to add those boxes. There are a lot of ways to do it. I will show you the one that I used. First we will make a css class in our blogger template. Use this for Basics of Blogger template. In the css section add this code.

.postCode{
 background:lightyellow none repeat scroll 0 0;
 border:1px inset orange;
 height:150px;
 margin:10px;
 overflow:auto;
 padding:6px;
 text-align:left;
}

You can change the background/border colors height etc to match your needs. Now, we will use this class with a <PRE> tag to format our code in those boxes. So enclose your escapped code in this manner.

<pre class="postCode">
YOUR CODE
</pre>

Tadaa! You are done.