Adding Syntax Highlighter to blog using ‘Autoloader’ method in blogger/blogspot

This tutorial tell you how to add syntax highlighting to Blogger with Alex Gorbatchev’s open-source SyntaxHighlighter Using autoloader method.
Advantages of this method:
SyntaxHighlighter contains a lot of brushes. Previously one had to explicitly load all the brushes required. But this method load them dynamically without having to load them all on the same page. So the brushes get loaded only when they are called, thus reducing page load time to great extent. …..

1: Adding SyntaxHighlighter to Blogger Template
  • Log into your blogspot account, select the “Design” tab, and then click “Edit HTML.”
  • Backup Your Template By clicking “Download Full Template”
  • Search for </body> (Hint: Use Ctrl+F)
  • Add the following code After </body>
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>
<script language='javascript'>
function path()
{
var args = arguments,
result = [];

for(var i = 0; i != (args.length-1); i++)
result.push(
args[i].replace('@','http://alexgorbatchev.com/pub/sh/current/scripts/'));

return result
};
</script>
<script type='text/javascript'>
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js',
'xml @shBrushXml.js'
));
SyntaxHighlighter.all()
SyntaxHighlighter.config.bloggerMode = true;

</script>
  • Click Save Template

2: Adding Code In Post

  • You can add Code using <pre> Tag as:
<pre class="brush: html">

<!-- Your code here -->

</pre>
  • Note: you can use a <pre> tag only with html escaped characters
  • To Auto-Escape code Go Here or Here and then copy the escaped code.
  • U can also use <script> tag as:
<script class="brush: html" type="syntaxhighlighter">

//Your code here

</script>
3: There is no step 3 !!

U can use any of the brush at class=”brush: html;” instead of html brush for different codes.
See the available brushes here


For more advanced configuration refer here



  • http://www.gohost.in Web Hosting India

    Autoloader is a best method to add a syntax highlighter to a blog.. Thanks for this tutorial..

  • http://specialdoseofsadness.blogspot.com/ Bonjour Tristesse

    Thanks for the tutorial.  This is working great.

    • http://sahilp.in SAHIL

      u r welcome… and the best thing is that only one script is loaded at a time… thus reducing page load time..

  • http://www.mactonweb.com web design bangalore

    Great tutorial you have describe well this nice info 

  • Nolram Rod+discusblog

    Thanks for this tut, when he first added autoloader I tried to add it by myself to my blogspot blog and kept messing up a tag or symbol somewhere so I left it for later and never fixed.  I was able to just copy and paste from here then add some indentation and voila it works.

    • http://sahilp.in SAHIL

      u r welcome..
      even i had the same problem.. but i figured it out and decided to put it on my blog