To display codes [CSS, XML, HTML and Javascript] in posts

Saturday, December 19, 2009

Many of bloggers are not aware of displaying codes [CSS, XML, HTML and Javascript] in blogger posts. If anyone tries to post normally the code is not visible. The code to be posted should be friendly.

It can be customized in two methods
  • Elliotswan Postable
  • Firefox Addon
Elliotswan Postable
The code to be posted can be made friendly at Just open the site, post the code and click on make it friendly. Make Code Post Friendly :

Firefox Addon
Install GreaseMonkey
and open this script

Install the script and you will find "HTML Encode Selection" button by the side of "Publish Now" button in post editor. Now, to make any code postable select the entire code in "Edit HTML" mode and click on "HTML Encode Selection". The code will be automatically generated.

* This method works only in old post editor.

Making the code highlight
After making the code postable, you have to highlight the code in your post for clear view. To do this here is a hack :

To add this go to > Layout >  Edit HTML and search for ]]></b:skin> and add the below code before this tag.
.code {
margin : 15px 15px 15px 25px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f2f2f2;
border : 2px solid #dcdcdc;
.code li {
font-size : 14px;
line-height : 20px;
font-family : Arial;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
You can customize this code and can change colors to match your template.

Now whenever you create a new post include the code between :
<div class="code">
Insert your code [CSS, XML, HTML and Javascript] here.
This is the best way to add codes in your blog posts. If you find any difficulty just add comments.

Subscribe to our blog

Do you have any Suggestions, add your comment. Please don't Spam!
If you like this site >> Subscribe to our feed


Post a Comment