Display HTML,Javascript and XML Code In Blogger Post

• Tweet

• Tweet

After giving a firefox add on for Adding XML, HTML and JavaScript as plain text in your blogger post i will give you another method from which you can do the same thing, in fact this is the one that i am using right now to display any code as a plain text. see BreadCrumbs in Blogger.

Let’s first address the issue why you can’t directly put the code as plain text in you post?, the answer is Web browsers are smart as you give them code they render them into pictures and display on the monitor. There are few solutions available on the internet to show your code as plain text in your posts, but what I am going to show you is the best one i have ever used.

Syntax Highlighter is the ultimate solution For Displaying any types of Codes and Scripts In Blogger posts, it uses JavaScript library, does the highlighting using CSS, and supports many programming languages.

Some prerequisite Steps:

1. Download the scripts. You can download all the required script files here.

2. Extract the files and upload them to your server. Upload only the needed files, you’ll find out the one you need as you read along. If you don’t have a file host (or onBlogger like me), don’t despair, there is a free hosted versions like http://www.hotlinkfiles.com/ and http://www.mydatanest.com/.

3. Link the files to your pages. For the purpose of this demonstration it will be assumed that scripts/*.* was extracted and placed into /scripts folder and styles/*.* into /styles.

Now Modify and insert these codes into the Header segment of your page/template as given below:

 
 
 <script type="text/javascript" src="/scripts/shCore.js">       

Now SyntaxHighlighter looks for

tags (pre-formatted text) which have specially formatted class attribute. The only required parameter is brush (see configuration) which should be set to one of the brush aliases that you have loaded previously. You need to switch to source code mode to do this.

Here’s a typical example:

 enter your code snippet here

Now Publish your post and you have done ! as usual if you have any doubt then let me know, i love comments