How to Add Syntax Highlighter(v3) to Blogger Blogs

March 2, 2011   /   Posted by in Blogger Widgets, Highlighters 26 Comments
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="/index.html">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?

  1. Click the below Button
  2. First select a theme of your highlighter
  3. Select Brushes that you want to highlight (Ex:- JavaScript, HTML, PHP …)
  4. Click on “Generate” button to generate your code
  5. 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

  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 &lt; 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
  3. 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>

  4. Then i paste converted code inside this tags
  5. 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>
  6. 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. :)




Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.
←
→

26 Comments on “How to Add Syntax Highlighter(v3) to Blogger Blogs” Add Comment

  1. avatar

    Duy Pham March 4, 2011 5:23 am #

    Nice tip friend!

  2. avatar

    puluth® April 6, 2011 4:09 am #

    thanks, you are my hero . :D

  3. avatar

    Andika May 4, 2011 5:38 pm #

    Thanks. Good Article.

  4. avatar

    Dhar May 26, 2011 6:59 am #

    Very thanks…

  5. avatar

    Svip4u.InFo June 2, 2011 7:37 pm #

    Nice,but i want to change height of <pre>.
    What will you do?

  6. avatar

    Packets June 25, 2011 10:38 am #

    Nice howto!

  7. avatar

    Chandra January 30, 2012 11:26 pm #

    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.

    • avatar

      Harish February 3, 2012 5:23 pm #

      Just Follow the Tutorial again.

  8. avatar

    Kannan February 15, 2012 9:18 am #

    I followed the steps but not working for my newly created blog. Di I need to add any script on every pages ?

    • avatar

      Harish February 15, 2012 9:58 am #

      Don’t need to add any other scripts. Once again follow the tutorial carefully

  9. avatar

    Aditya Meilaz Rahmanto March 11, 2012 1:51 am #

    Nice Share Harish

  10. avatar

    Ashish March 26, 2012 3:29 am #

    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

    • avatar

      Harish April 4, 2012 12:23 am #

      Use Syntax Highlighter for Blogger
      http://www.way2blogging.org/2011/03/how-to-add-syntax-highlighterv3-to.html

  11. avatar

    WrRaThY April 13, 2012 3:09 pm #

    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!

  12. avatar

    Namal June 28, 2012 8:00 am #

    I added this my blog successfully. But I show there is a numbering issue. See the row numbers are not in correct order.

  13. avatar

    Wammy July 18, 2012 7:28 am #

    Awesome!!

  14. avatar

    syui August 2, 2012 8:41 pm #

    The problem has arisen.
    When a lot is written in, there is a useless new-line.

    • avatar

      Harish August 2, 2012 11:03 pm #

      lines are wraps if they are too long. but no count is added to the new line.

  15. avatar

    sanjiv August 17, 2012 8:07 pm #

    not working..it says” can’t find brush for html”.i tried with javascipt too..bt again it says “can’t find brush for js”

    • avatar

      Harish August 17, 2012 8:09 pm #

      select javascript brush while generating the code and add it.

  16. avatar

    Paresh August 18, 2012 5:11 pm #

    Please see this, i get following issue at

    http://paresh-sqldba.blogspot.in/2012/08/cte-within-cte-sql-server.html

    Some space getting in highlighter code

    • avatar

      Harish August 23, 2012 1:00 am #

      set your post font size to 100%

  17. avatar

    S@gor Sur September 7, 2012 5:32 am #

    I wants to know the name of your all brushes!

    • avatar

      Harish September 11, 2012 6:23 am #

      i use CSS, XML(HTML, XTHML) and Javascript.

  18. avatar

    Agung Yudha October 28, 2012 3:33 pm #

    hey,
    nice post brother :)
    I’ll use it for my blog

    thx so much :)

  1. Pingback: SyntaxHighlighter をワードプレスに設定 | No-Delay

←
→
© 2014 Way2blogging. Designed by +Harish, Powered by WordPress