Add SyntaxHighlighter in Google Sites

In here I show you a way to put Javascript/flash-based SyntaxHighlighter module in Google Site.

(1) Create another Google Blog just for hosting the source code. For each GMail account you can create multiple Blogs using different settings and designs. For this blog, you put SyntaxHighlighter Javascript in the design template. Here is the template I use:





I includes highlight brushes for SQL, Java, and XML because these are the source code I usually included in the Google Site. You can use whatever brushes you need, but DO NOT include all brushes since it will slow down the loading.

(2) Create a "blog" entry with the source code only. In order to display SyntaxHighlighter, you can edit the blog in HTML mode and put your source code in a PRE block:

<PRE CLASS="brush:java">

package com.blah;

import java.io.*;
  
  public class MyClass() {
    .....
  }
</PRE>

Publish this blog entry and copy the URL for this blog entry.

(3) In you Google Sites page, add a Gadget to include an IFrame. There're numerous IFrame gadget and I use this one (Include gadget) for my site:

Put the URL of your source code blog entry in Step (2) in the URL property.  Adjust the display width and height as you need.

The result page will look like that: