How to display HTML code in blog or web

Sometimes you want put some HTML code in your blog or web. This can be very difficult process.

Why?

Because HTML code act like code, resulting in unpredictable web page generation or be filtered out and leave empty space.

Example

John want to write this text (HTML code) in his post :

<h3>Write code in blog</h3>

Problem is that when John write this code and publish his post, John get this:

Write code in blog

This happens because <h3> and </h3> are HTML tags and web browser interprets it like "Write code in blog" in heading 3.

We can avoid it with turning the code characters and symbols into character entities. The browser interprets these and displays them into symbols on the screen, turning the code into publishable content.

Like this:
&lt;h3&gt;Write code in blog&lt;/h3&gt;


Explanation:

&lt; replaces <

&gt; replaces >


So, in the end John get this text in his post:

<h3>Write code in blog</h3>

And this is what we want.

New problem

Replace all code characters and symbols into character entities is boring and time consuming job.

Generating character entities solution

Solution is web converter called Postable.
Go to this briliant web page and write HTML code you want to put on your web or blog in this page. Click "make it friendly" button and you will get character entities of the code. Paste the result and copy it in your post.

Example:

1. Write <h3>Write code in blog</h3> code in Postable page





2. Click button "make it friendly"



3. Copy result





4. Paste result in your blog editor and publish post

There is centricle.com in which you can code and decode HTML. Even more power then Postable.

Facts listed in this post are not only for HTML code but for Jscript, php ...

And on the end if you want to display code formatted like on the picture bellow look article about displaying code snippets with syntax highlighter.