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='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='https://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