Sunday, June 21, 2009

Syntax Highlighting in Blogger

I am using Alex Gorbatchev's excellent Syntax Highlighter scripts.

To enable syntax highlighting in your blog posts, add the following code snippet in the HTML head section of your template.

<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 language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js'/>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPerl.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJavaFX.js"></script>
<script language='javascript' src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js"></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf";
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

To illustrate the use of SyntaxHighlighter, lets use a simple "helloworld" C program. You can enclose code snippets in your posting using the <pre> tag as shown below.

<pre class="brush: c">
#include <stdio.h>

int main() {
printf("Hello World!\n");
exit(0);
}
</pre>

If you want to post Python code instead, change the "brush" to "python" as shown below.

<pre class="brush: python">
#!/usr/bin/env python
print "Hello World"
</pre>

You can find the full list of supported languages ("brushes") here.

If you have a place to host the SyntaxHighlighter files then you can test and push out new versions when they become available. Also, if you want to modify the code this is an easier option. That is what I have done. So, my template configuration looks as shown below.

<link href='http://arunbhanu.com/sh/Styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://arunbhanu.com/sh/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://arunbhanu.com/sh/Scripts/shCore.js'></script>
.
.
.

No comments: