How to Add Syntax Highlighter(v3) to Blogger Blogs

How to Add Syntax Highlighter(New Version) 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</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
a. Installing Scripts
b. Usage

Watch live Demo for Themes Here

How to Install Syntax Highlighter in Blogger?

Here is simple form to generate your Syntax Highlighter code
1. first select a theme of your highlighter
2. Select Brushes that you want to highlight (Ex:- JavaScript, HTML, PHP ...)
3. Click on "Get Code" button to generate your code
4. 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
1. 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>

2. 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. Encode / Decode HTML Entities
ii. 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>
finally 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>

Title : How to Add Syntax Highlighter(v3) to Blogger Blogs
Description : Syntax Highlighter version 3 is a powerful JavaScript tool to display and highlight your scripts and codes in blogger posts. In my previou...

How to Add Syntax Highlighter(v3) to Blogger Blogs

0 Response to "How to Add Syntax Highlighter(v3) to Blogger Blogs"

Post a Comment