Friday, December 19, 2008

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.

Example of javascript code in syntax highlighter

6 comments:

Anonymous said...

where is my blog link there?

Anonymous said...

anyway thanks..I added you na.. can you add my link on you footer?

Anonymous said...

uy palitan mo yun humble pride iba na..
Edzhstar
http://edzton.blogspot.com/

Anonymous said...

dito

http://edzton.blogspot.com/2008/09/blogmates.html

Edzhstar ilagay mong name sa edzton.blogspot.com

Samuel Bosch said...

A great tool for converting your code to html is Pygments. Here you can find some sample usage : http://gissolved.blogspot.com/2009/05/python-toolbox-2-pygments.html

Unknown said...


Great post i really appreciate this post because a student i really want to become a
Web Designer and i'm looking also Wordpress Courses i was planning
to learn more about wordpress also. but anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.