Display HTML / JavaScript code in Blogger - How to

Nov 29, 2008

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.

14 comments:

Post a Comment
Abhinav.Singh said...

The best is to use syntax highlighter. It rocks with wordpress but not sure about blogspot.

http://code.google.com/p/syntaxhighlighter/

Bhavya Jain said...

Hmmm ...

I have to try out wordpress. Have heard enough about it :) Really looks cool.

Bhavya Jain said...

So I tried free wordpress and found that it just sucks

There are not much features available ... Although its best if you can download the wordpress software and start a blog on your website ... then the power you get is awesome. That Rocks :)

Bad - wordpress.com
Good - wordpress.org

Chuck Savage said...

Thank you, really helpful

Samuel Bosch said...

You can also use Pygments, a Python syntax highlighter. Here is how I use it : http://gissolved.blogspot.com/2009/05/python-toolbox-2-pygments.html

Unknown said...

hello . i can display html cods in my posts with ur help , but i cant put it in that yellow window . where i should paste the codes that u put in latest window in this post ?

java performance said...

Wonderful illustrated information. I thank you about that. No doubt it will be very useful for my future projects. Would like to see some other posts on the same subject!

Anonymous said...

thanks
it worked for me

Mahendran said...

Thanks for sharing..

Zachy_je said...

Helpful How-To! Thank you!

Romi said...

Thank you very much for advices