How to add code block into blogger posts


This post will guide you the way to add a code block into your post MANUALLY. You may find a lot of tutorials that have widgets already built and pack to do this. I really think you should write code to do it at least to know the way it works.

Assume that you got a text need to be added to code block:
TRACE-SOLUTION.COM

Now, open your blog, take a new post, go to Edit HTML tag. Finally add this code to your HTML editor:


<style type="text/css">  
 pre.CICodeFormatter{  
      font-family:arial;  
      font-size:12px;  
      border:1px dashed #CCCCCC;  
      width:99%;  
      height:100px;  
      overflow:auto;  
      background:#f0f0f0;  
      line-height:20px;  
      padding:0px;  
      color:#000000;  
      text-align:left;  
 }  
 pre.CICodeFormatter code{  
      color:#000000;  
      word-wrap:normal;  
 }  
 </style>  
 <pre class="CICodeFormatter" ><code class="CICodeFormatter"> TRACE-SOLUTION.COM   
 </code></pre>  

Now switch to Compose to see your result

TRACE-SOLUTION.COM  
From now onwards, anytime you want to add a code block into your post, just use this trick.

Comments

Popular posts from this blog

Auto Scroll in Common Controls

Convert typed library (.tlb) to .net assembly?

Disable close button on form - C#