How to Show JavaScript or HTML Code on Blogger Blog Posts?

During the first days of my blogging career, I didn't have any practical knowledge about the way codes work on Blogger post editor.

One of the major problems I faced was the difficulty in publishing my codes. The problem was very simple.

I had to share both JavaScript and HTML codes as part of my coding tutorials. But, Whenever I type codes on posts, Blogger automatically starts interpreting them.

I selected the option Show HTML Literally under the Blogger post settings options but failed.

So I was forced to show the codes as images rather than in text format. I knew it wouldn't give the readers a good reading experience.

So I started looking for a way to show the HTML and JavaScript code literally.

Then I found a way to show HTML and JavaScript codes as plain text on Blogger posts. It is a very simple process called parsing.

Here we convert the script into a parsed format. In parsed format, we convert certain characters of the code into escape characters.

After converting a script into an escaped version, we can show it on the blog without having any trouble. This tutorial explains how to convert a script into parsed form and show it inside the blog posts.

How to Display HTML & JavaScript on Blogger Posts

To display codes on a Blogger blog post, you should do two things.

The first step is to convert them to escaped characters. The second step is to use the HTML tag pre.

You should write the parsed HTML/JavaScript inside the tag pre.

Have a look at the format displayed below.

<pre> code in escaped characters </pre>

Now let us check how to convert a script into the escaped format.

Traffic Needed to Earn $100 Per Day From Google Adsense
How to Optimize Blogger Template?
How to Change Link Color From Template Designer?
Stop Redirecting Visitors From ?m=1 Blogspot Pages

The next section of this tutorial teaches you the rules to parse an HTML Script.

Rules to Convert HTML/JavaScript code into Escaped Characters

It is very simple to parse a script into the escaped format. All you have to do is to follow the three rules provided below to parse any HTML/JavaScript/Python code.

< must be changed with  &lt;

> should be changed with &gt;

“ should be changed with &quot;

Let me show to how to write a simple HTML tag table with escape characters.

<table><tr> <td> </td>   </tr>

</table>
    

After parsing, the code will look like it.

  <table><tr> <td> </td>   </tr>

</table>
 

You can see it is very easy to parse a script. However, if the script is very big (say 1000 lines), we need to use tools to parse it.

Manual parsing won't be practical for a big script. Here we share some free tools to convert JavaScript or HTML script into the escaped version.

Free HTML/Python Parsing Tools

The following free tools will help you to convert normal HTML and JavaScript codes into Escaped Characters automatically.

http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

http://codeformatter.blogspot.in/2009/06/about-code-formatter.html

https://www.mironiyar.com/p/html-parsing-tool.html

Showing JavaScript and HTML codes in plain text format will be useful for the readers compared to give them codes in image format.


It will reduce the time of readers to apply the codes to their Blogspot template. They can copy and paste it directly from our tutorial.

Remove Date Number (Year & Month Figure) From Post URL
Show AdSense Ads Inside Blogger Post Content
How to Calculate CPC of AdSense Ads Shown on Your Blog