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

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 Elliotswan.com. Just open the site, post the code and click on make it friendly. Make Code Post Friendly : http://www.elliotswan.com/postable/

Firefox Addon

Install GreaseMonkey https://addons.mozilla.org/en-US/firefox/addon/748
and open this script http://userscripts.org/scripts/source/42696.user.js.

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.

</div>

This is the best way to add codes in your blog posts. If you find any difficulty just add comments.