Wednesday, September 22, 2010

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.
  • 9 comments:

    Unknown said...

    Thanks....!

    Joel De La Torre said...

    Thanks. With your help, I was able to use the highlighter on my own blog.

    http://datatypes.blogspot.com/

    Thanks again!

    Sumant said...

    Thanks a lot! I was just missing "SyntaxHighlighter.config.bloggerMode = true;". With that it now works.

    Unknown said...

    awesome post - though i haven't even read it fully, i believe i have got what i was looking for - thanks dude

    Nelson said...

    Thanks! It works on my blog

    http://nelsoncli.blogspot.com/

    lambo said...

    i don't understand :(
    what is the meaning of brusher??

    Unknown said...

    I followed all the steps but still it is not working. please help me what should i do.

    Unknown said...

    How use the autoloader.js? In your example wrong line numbers. You know how fix this. Last 2.832 more stable and usefull, imho.

    Darshan Shah said...

    @Sumant - yes, that line is the most critical when using SyntaxHihlighter in blogger!
    @lambo - "Brushes" are the name SyntaxHighlighter uses to denote what kind of formatting of code you need, i.e. use a java brush for java code, and so on.
    @Chandra - I do not see any SyntaxHighlighter related code on your blog - did you remove it?
    @Alexandr - I found the new version to be much better than before. Did not understand your comment about wrong line numbers - please explain in more detail.

    LinkWithin

    Related Posts Plugin for WordPress, Blogger...