Setup SyntaxHighlighter For Google Blogger

Introduction

For a while, I have been thinking to blog my research and hand-on works. However, the out-of-box blogger's format cannot produce professional like results. In particular, if you want to put your code snippet by copy-and-paste, you will not get the right format. Today, I decided to crack the shell and after some trial and errors, I found a way. I am pretty impressed with SyntaxHighlighter. Of course, I did my googling, and found few very useful links. However, even with the help, the trial and error tooks few hours to get right. Here is my notes on how I did it.

I have also created a video for this at youtube: http://www.youtube.com/watch?v=Wl0bpEK_rQQ

Quick Reference List

Here are the reference I used:

1. Use this one if you want publish simple code
2. This is will really work!

Update Blogger Template

Simple Code Format

Add the following css code just before the end of tag:

.code { 
background:#f5f8fa; 
background-image:none; 
background-repeat:no-repeat; 
border: solid #5C7B90; 
border-width: 1px 1px 1px 20px; 
color: #000000; 
font: 13px 'Courier New', Courier, monospace; 
line-height: 16px;
margin: 10px 0 10px 10px; 
max-height: 200px; 
min-height: 16px; 
width: 00px
overflow: scroll; 
padding: 28px 10px 10px; width: 90%; 
} 
.code: hover { 
background: #FAFAFA; background-image:none; 
background-repeat:no-repeat; 
}

Looks Like Professional

In order to use SyntaxHighlighter, we need to add the following code just before the tag:

Examples I

This sample is created using reference 1. In this example, I use the following tag:

   
   //code goes here

package com.vha.esb.purej;

public class Context {
   public String POLL_END_TIME = "2013-06-05 11:30:00.000";
   public String POLL_START_TIME = "2013-06-05 12:00:00.000";
   public String MEMID;
   public String DP_340B_ID;
   public String RX_SEQ_NUMBER;
}

Example II

This example use reference 2, but I typed the sample code. Also, I use

   
   //code goes here

package com.vha.esb.purej;
   for (int i = 0; i<10; i++)
   {
      int j = i
   }

}

Example III

The following code are copied from eclipse and pasted to html page

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package org.apache.camel.example.osgi;

import java.util.Date;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * @version 
 */
public class MyTransform  {
    private static final transient Logger LOG = LoggerFactory.getLogger(MyTransform.class);
    private boolean verbose = false;
    private String prefix = "MyTransform";

    public Object transform(Object body) {
        String answer = prefix + " set body:  " + new Date();
        if (verbose) {
            System.out.println(">>>> " + answer);
        }
        LOG.info(">>>> " + answer);
        return answer;
    }

    public boolean isVerbose() {
        return verbose;
    }

    public void setVerbose(boolean verbose) {
        this.verbose = verbose;
    }

    public String getPrefix() {
        return prefix;
    }

    public void setPrefix(String prefix) {
        this.prefix = prefix;
    }
}