Monday, January 31, 2011

SyntaxHighlighter integration in Blogger.com

In a earlier blogpost, we've talked about using SyntaxHighlighter to make your programming code snippets more readable on your web pages. This blogpost will integrate SyntaxHighlighter into a blog hosted on blogger.com (like this blog).

Simply said, SyntaxHighligther is a set of JavaScript/CSS files you have to include on your webpage. You can host it on your private server, or you can use the scripts already online. I linked to the files in the online SVN repository of SyntaxHighlighter: http://syntaxhighlighter.googlecode.com/svn-history/trunk/.

The first step is to edit the HTML template of your blog. Starting from your dashboard, go to Design and then Edit HTML. This will present a page where you can edit the template. Scroll to the end of the code, paste the following piece of code just before the </body>-tag:
<!-- START SyntaxHighlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- END SyntaxHighlighter -->

This piece of code will load the SyntaxHighlighter files, and update the markup of your code snippets enclosed by <pre> or <textarea>. Before it works, you have to mark them as code by supplying the following attributes to the mentioned two tags, like this:
<pre class="java" name="code"> ... </pre>

I have not included every syntax file available. If you need support for other programming languages, you have to extend the JavaScript code above to include them. The available scipts can be found here: http://syntaxhighlighter.googlecode.com/svn-history/trunk/Scripts/

5 comments:

  1. Hi Gin-Lung Cheng.I've been looking for this hack syntax.

    Anyway, I have followed your Blog, I hope You follow me back or like my page Blog.

    Thanks you!
    -yana

    ReplyDelete
  2. Dr. Gin-Lung Cheng,

    Thanks so much for your contributions. Your example is the first (out of many I have tried) to help me get Syntax Highlighter to work for me on Blogger.

    Thank you.

    ReplyDelete
  3. I have been looking for syntax highlighting,
    I just followed your article I could get syntax highlighting for my java code. Thanks for the article.
    I think there is a little syntactical problem in the closing PRE tag that you shown in the article

    ReplyDelete
  4. Thanks for pointing it out, Nagasharath. It should be fixed now.

    ReplyDelete
  5. This post is outdated. Use the following tutorial: http://oneqonea.blogspot.nl/2012/04/how-do-i-add-syntax-highlighting-to-my.html

    ReplyDelete