Add code formatting to Blogger

I understand that it is a pain to provide code block and code formatting in Blogger. Below are some tips to make your life better (hopefully, at least a bit better)

Code Container

Sometime, you will want to put your code inside a container as below






public void testCode(){

//your code here

}



To have the container, do the following

1. Go to Layout -> Edit HTML -> Edit Template



2. Search for this Code



]]></b:skin>


3. Add the following before the above code




pre{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000
}

pre:hover {
border:1px solid #efefef;
}

code {
font-size:120%;
text-align:left;
margin:0;
padding:0;
color: #000000;
}

.clear {
clear:both;
overflow:hidden;
}


4. Save the template

5. Now, you can add your code to the container in



<pre> code </pre>
Tag Formatting


If you work with XML or Tagging with < > , you will fine that it is not a easy task in Blogger. By default, Blogger will remove these < > so that they can perform their template processing.

So far, my way to workaround with it is to use ASCII code for HTML. There is one website which help to replace those characters for you.

http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

Comments

Post a Comment

Popular Posts