How to use Syntax Highlighter 3 in Blogger

Syntax Highlighter version 3.0.83 has been released and there are quite a few changes in the way things work now. I realized this when the rendering on this site broke after I modified it to use the latest release. So, here is the steps required to setup the "hosted" version of the latest Syntax Highlighter (version 3.0.83) and integrate with your Blogger/Blogspot blog.

Installation

1. Navigate to Dashboard > Design > Edit HTML
2. Backup the current template by clicking on the link Download Full Template
3. In the textarea, press CTRL+F to find the code </head>
4. Copy the below code and paste it just above
   

   <!-- Syntax Highlighter Additions START -->
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
   
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   
   <script language='javascript' type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
   </script>
   <!-- Syntax Highlighter Additions END -->
   

5. Preview your changes and make modifications as required
6. Save the template

In the above code, I have put in brushes for the languages that I use frequently. Modify the brushes according to your needs - check the full list of supported brushes here and use whichever you need.

Configuration

Apart from choosing the brushes that you need, there are other configuration parameters that you can setup as well. Check out the details here. More useful ones are the ones that allow you to change the starting line number, highlight specific lines, disable auto-linking of URLs and html-script option to highlight mixture of HTML/XML code.

Apart from these configuration changes, you can change the theme as well. SyntaxHighlighter comes bundled with 7 themes and I personally like the default one. However, you can choose the theme that you fancy the most by simply replacing the name of the theme in this line:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

So you can replace shThemeDefault in the above line with any one of the following themes:

1. Django - shThemeDjango
2. Eclipse - shThemeEclipse
3. Emacs - shThemeEmacs
4. Fade to Grey - shThemeFadeToGrey
5. Midnight - shThemeMidnight
6. RDark - shThemeRDark

Usage

To use it in your blog post, there are a couple of things that need to be done.

1. Escape all code by replacing any occurrences of:
   
   1. < with &lt;
   2. > with &gt;
2. Enclose the escaped code between <pre class="brush:[brush_name];[optional_params]"> and </pre>
3. Setup the proper brush name (based on the code being highlighted) in the opening pre tag. Using the correct brush will ensure proper highlighting of the code

New Features in 3.0.83

The new version brings with it quite a few new features - here's an overview:

• Auto-Loading of Brushes

  Now all the brushes need not be pre-loaded on every page. You can load only the required brushes on the pages that need those brushes. Use the shAutoloader.js and then load the brushes as required
  For more details on using this feature, check out the instructions here. Note that this might not be so useful for a blogger account as we do not modify the javascript for each page/post.

• No usage of Flash

  Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.
  

• Code copy without line numbers

  Now the copied code excludes line numbers and the extra leading tabs/spaces to make it usable directly - very convenient!
  

• Add Title

  Now you can add a title to the code block by title="[title_name]"

parameter to the pre tag.

More under the hood

More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.