SyntaxHighlighter for Blogger

SyntaxHighlighter

Official website: http://alexgorbatchev.com/SyntaxHighlighter/
"SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript."

Download or using hosted version

From http://alexgorbatchev.com/SyntaxHighlighter/download/, two ways to use SyntaxHighlighter:

1. Download whole package(ex: "syntaxhighlighter_3.0.83.zip") and upload to your host server.
2. Use a free hosted version according to http://alexgorbatchev.com/SyntaxHighlighter/hosting.html. (You can donate to help SyntaxHighlighter author pay for these extra bandwidth :))

Here I choose using free hosted version.

Installation

Two way to install:

1. You can add all brushes manually to your post: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
2. You can also use dynamic brush loader: http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html

Here I choose manually way.

Available brushes

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Configuration for Blogger

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

My steps for Blogger

1. Where are those scripts and css files:

• syntaxhighlighter_3.0.83\scripts\*.js
• syntaxhighlighter_3.0.83\styles\*.css

2. Go to your Template -> Edit HTML.
3. Add below content before </head> tag ends:

4. Save the template.
5. Here’s examples:

• <pre /> method:
  

    
      /**
      * SyntaxHighlighter
      */
      function foo()
      {
        if (counter <= 10)
          return;
        // it works!
      }
    
  

  Will render as:
  

      /**
      * SyntaxHighlighter
      */
      function foo()
      {
        if (counter <= 10)
          return;
        // it works!
      }
    

• <script /> method:
  
  Will render as:
  

References

http://geektalkin.blogspot.in/2009/11/embed-code-syntax-highlighting-in-blog.html
http://wesingkasu.blogspot.in/2013/05/blogger-syntaxhighlighter.html [Chinese]
http://pydoing.blogspot.in/2010/11/syntaxhighlighter-blogger.html [Chinese]