How to Post Code in Blogger

Do you want to post some piece of code in your blog post? By default, blogger or any other blog platform will execute all the HTML code, and the result will be shown instead of your code. When you check your post, you will see  funky looking text and a messed up layout.

To fix this problem, you have to post your code inside the <pre> tag

1. Login to your account --> Design --> Edit HTML
2. Click on "Download Full Template" to backup your template.
3. Check "Expand Widget Templates"
4. Search for

]]></b:skin>

5. Add the following CSS code before that line

.post pre{
   color:darkblue;
      background:#ECD4C5;
   border:1px dashed #695C54;
      overflow: auto;
   margin:1em 20px;
   padding:5px 5px 5px 10px;
   font-family:"Trebuchet MS",Courier New, Courier, monospace;
      overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   /* width: 99%; */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
  }

6. Save your template
7. Whenever you make a new post, put your code inside the <pre> tag as following

   <pre> Your code here </pre>

Remember to change the following character to HTML character entities

< = &lt;
> = &gt;
/ = &#47;   
] = &#93;
[ = &#91;
" = &#34;
' = &#39;