Syntax Highlighter version 3 is a powerful JavaScript tool to display and highlight your scripts and codes in blogger posts. In my previous post there is only a section for showing your codes. But in this tool we display in special section with highlighted script tags.
now i am showing a HTML Page Script here with this tool
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML Code Example - way2blogging</title>
</head>
<body>
<h1>HTML Code Example</h1>
<p>Hello World !</p>
<p>This line is Sample line.</p>
<div class="foobar">
This is an
example of smart
tabs.
</div>
<p><a href="http://www.way2blogging.org/">Way2Blogging</a></p>
</body>
</html>It is easy to setup and highly customized feathers you can use with this tool
- Adding Scripts
- Usage
Watch live – Demo for Themes Here
How to Install Syntax Highlighter in Blogger?
- Click the below Button
- First select a theme of your highlighter
- Select Brushes that you want to highlight (Ex:- JavaScript, HTML, PHP …)
- Click on “Generate” button to generate your code
- Copy the Entire code and paste it before
</head>tag in your template
You successfully Installed Scripts on Blogger template!
Now How to Use this on Blogger Post
You want to display scripts and codes on blogger post
- Put your Script or Code inside the PRE tags and define class with brush name.
<pre class='brush:[brushname];'> <!--Put Your Code Here (must be HTML escaped)--> </pre> - Make sure your Script or Code must be HTML escaped, eg. all < must be replaced with < This will ensure correct rendering. There are several tools to convert Your code !
i. HTML Entities Encoder / Decoder
ii. Encode / Decode HTML Entities
iii. Postable - For suppose i am showing a JavaScript code.
i am defined a
<pre></pre>tags, and defined a class<pre class=''></pre>and gave a brush name as<pre class='brush:js;'></pre> - Then i paste converted code inside this tags
- finally my code is like
<pre class='brush:js;'> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script> </pre> - it results like this
<script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script>
If you have any Doubts, left a Comment below. 
Nice tip friend!
thanks, you are my hero .
Thanks. Good Article.
Very thanks…
Nice,but i want to change height of <pre>.
What will you do?
Nice howto!
Nice post. I followed steps whatever you said above, but it was not working for my blog (recently created). can you kindly help me on this? I tried for cpp code syntax highlights.
Just Follow the Tutorial again.
I followed the steps but not working for my newly created blog. Di I need to add any script on every pages ?
Don’t need to add any other scripts. Once again follow the tutorial carefully
Nice Share Harish
Hi
I want to highlight some content of my blog post in the same way as you have highlighted your syntax.
I am basically not interested in publishing syntax.
Can you please help me out
Use Syntax Highlighter for Blogger
http://www.way2blogging.org/2011/03/how-to-add-syntax-highlighterv3-to.html
Thank you!
i was trying to make it work for few hours now, with few different js plugins… with no luck.
until i found ur page!