Show HTML Source-Code In Blogger

HTML has special handling for characters like <> symbols, so it doesn't work well with those characters where they shouldn't be.

Having spurious characters like those symbols in your text can have some weird effects - blocks of text not appearing, broken formatting, and generally just not seeing what you expect to see.

This can all be fixed by 'escaping' those characters. This process involves scanning the text for those characters, and replacing them with a special character-code that browsers can interpret as the correct symbol, without actually embedding that symbol in your text.

For example, the escaped character code for > is >.

Most web platforms have some way of manually encoding and decoding this escaped format.

First you need to HTML encode your source-code, we want to be able to display the HTML source so we need to encode all the HTML characters so they don't render as real HTML in the browser. For example <div> needs to be converted to <div>, otherwise it would create a div.
You could do this manually, but it takes a while so checkout this tool which does it automatically.

Example of source-code after i use that tool :



<label for="sbb" style="display: none">
Submit search form</label>
<input type="submit" name="sa"></input>
<input type="hidden" name="client" value="pub-xxxxxxxxxxxxxxxxxxxxxxxxxx">
</input>
<input type="hidden" name="forid" value="1xxxxxxxxxxxxxxxxxxxxx"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1xxxxxxxxxxxx"></input>

 

2 comments:

Chad Harris said... January 9, 2008 at 10:43 AM  

Great posts for newbies like me! When I tried to upload the favicon where do I put it in the directory for blogger to point too?

I tries to just add it as an page element to the bottom of the blog so the address would point to it but it would not take the extension? I stumbled this one, you have a lot of good stuff here.

admininistrator said... March 15, 2008 at 1:41 AM  

you can upload the favicon to picture hosting like 'imageshack.us'.

Post a Comment