How To Show HTML Code In Blogger Post

Many people who have come across some of my posts have asked me the question of "how do you show your html or code in your blogger posts without the browser rendering that code?"

As many of you know, who use blogger that if you try and put the code as it is straight into your post, it likely will not show up (Especially javascript) or the browser will read the code and execute it, instead of displaying the code itself.

So what I do is, I "escape" the html code. Some examples of where I did this is the article Google Translate Widget as well as the article on Blogger Title Tags

Web browsers carry out a function from your html code when they read it but if you use character entities, the browser will display the symbol istead and not run the function that character was designed for. This is what I mean by escaping.

Character entities are made up of three parts:

1. An "ampersand" (the & symbol)
2. Either a descriptive phrase, or a # followed by a number
3. A semicolon (the ; symbol)

You need to display your code in such a way where you find all the "<" and ">" """ symbols and exchange them for their Entity name. This is quite the chore and can be done in notepad etc.

For example "<" would end up being "&" followed by "lt;".
A quick and easy way is to go to Blogcrowds and enter your code in the box and hit the button to parse it into the escaped code for you which takes all of a few seconds and your html code will now be ready to show in your blogger post. Your new "code" will now be ready to place in a scroll box or blockquote or textarea within your blogger post. For my two articles I used textarea, although you can use blockquotes or iframes or scrollboxes. Just remember to escape the code or html you want to be displayed in your post, first.

I should also note, that if your editor in blogger keeps adding extra line breaks you may want to try this trick. Goto http://draft.blogger.com instead, then in your editor click on post options and tick the bottom radio button to select the option of not automatically adding line breaks for that post.