Add Syntax Highlighter to Blogger Blogs

Here is a very beautiful trick "Add Syntax Highlighter to Blogger Blogs ".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

GENERATE SCRIPTS

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;'>
	&lt;script type=&quot;text/javascript&quot;&gt;
	var d = new Date();
	var time = d.getHours();
	
	if (time &lt; 10) {
	document.write(&quot;&lt;b&gt;Good morning&lt;/b&gt;&quot;);
	} else {
	document.write(&quot;&lt;b&gt;Good day&lt;/b&gt;&quot;);
	}
	&lt;/script&gt;
	</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>

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Blogging Trainings