Display Html (and other) Code in Blogger

Sometimes you may need to show html, php or other language code in your post but when you write or paste it what happens is it dissappears and even worse damage your whole article. This is because blogger automatically recognizes code and use it as html source even if you insert it in compose mode. The example bellow shows what happens when you insert image tag. Blogger automatically converts it to html and show empty image, but what you wanted is only display this code as an example for your readers.

<img src="/image.gif" width="100" height="75" />

Now let's see how to easily insert a block of code into blogger post. The trouble begins when blogger reads less than sign (<) in a post, it signals that a code is being started and if blogger sees whole <div> tag it auto converts it. What you have to do is to convert special symbols to html entities. For example when you want to show less than sign (<) type &lt; , for greater than symbol (>) type &gt; and so on. Off course doing this by hand is very inneficient way. You can convert code text into html text by simply pasting it to Dreamweaver and copying code from code window.

dreamweaver window code view

1. Write code in Dreamweaver's design window and select it

2. Copy selected code from code window. This code is ready to paste into your blogger post. All symbols will be displayed correctly.

No comments: