Saturday 7 September 2013

How to Add Syntax Highlighter(v3) to Blogger Posts/Blogs

How to Add Syntax Highlighter(v3) 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

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 hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here here and directly ask the developer of this Widget for the Solution by Commenting there.

<<<<<****************************************************************>>>>>