Syntax highlight in blogspot

In the "Layout" -> "Edit HTML" page, add the following code after <!-- end outer-wrapper -->, and save the template.

<!-- SyntaxHighlighter -->
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js'></script>
<script type='text/javascript' 
src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js'></script>

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

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- end SyntaxHighlighter -->

The SyntaxHighlighter library searches all <pre> tags and apply highlight styles according to their class names.

<pre class="brush: js">
var foobar = function() {
  var el = document.getElementById('something');
  if (el) {
    el.innerHTML = 'Found you!';
  }
}
</pre>

Here is the highlighted code:

var foobar = function() {
  var el = document.getElementById('something');
  if (el) {
    el.innerHTML = 'Found you!';
  }
}

References

- SyntaxHighlighter API
- Using SyntaxHighlighter on BLOGGER
- How to add syntax highlight to Blogger