Source Code Syntax Highlighting for Blogs

Ever wanted to include syntax highlighted source code on your blog? Here's one way to do it (for Blogger):

First of all, you should disable automatic insertion of <br>, since those are shown verbatim if placed within <pre>-blocks. You do this under Settings -> Formating -> Convert Linebreaks (or similar, set it to "no").

Then you should include the highlighting script somehow. Go to Settings -> Layout and add a bottom element of type "HTML/JavaScript ". Then paste this in:

<style type="text/css">
.code {
    background-color:#F0FFEA;
    border:1px dashed #20A000;
    color:#000000;
    padding:6px 6px 6px 6px;
}

.code-line-numbers {
    color:#809080;
    border-right:1px dotted #809080;
    float:left;
    text-align:right;
    width:1.5em;
    padding-right:3px;
    margin-right:12px;
}

.code-code {
    /* This is the box around the actual code 
    (as opposed to .code which is both the 
    code and the line numbers) */
}

.code-keyword {
    font-weight: bold;
    color: #000000;
}

.code-type {
    font-weight: bold;
    color: #106020;
}

.code-variable {
    color: #004050;
}

.code-number {
    color: #F08000;
}

.code-comment {
    color: #208000;
}

.code-string {
    color: #F00000;
}
</style>
<script type="text/javascript" 
src="http://highlighter.ahnfelt.dk/CodeHighlighter.js">
</script>
<script type="text/javascript">
CodeHighlighter.highlightAll();
</script>

The last few lines load and apply the highlighting. Insert true between the parenthesis in the call to highlightAll to enable line numbers. You could also use another highlighter if you tweaked the above a little.

Now hit save. You're done! To include code in your blog comments, you must write it like <pre class="code XXX">CCC</pre> where XXX is the language name (for example java) and CCC is your code. One example is:

<pre class="code java">
public class VisitorDemo {
    static public void main(String[] args) {
        Car car = new Car();
        Visitor printVisitor = new PrintVisitor();
        Visitor doVisitor = new DoVisitor();
        printVisitor.visitCar(car);
        doVisitor.visitCar(car);
    }
}
</pre>

Which will show up as:

public class VisitorDemo {
    static public void main(String[] args) {
        Car car = new Car();
        Visitor printVisitor = new PrintVisitor();
        Visitor doVisitor = new DoVisitor();
        printVisitor.visitCar(car);
        doVisitor.visitCar(car);
    }
}

You may sometimes have to escape < and > with the corresponding codes &lt; and &gt;. The preview won't show the code as highlighted, but it will be when you hit save.

Now it's time to chose the colors and style you want for your code. Go back to editing the <style type="text/css"> code. It's CSS as you probably know, and it decides nearly everything about how your code looks. If you need more languages, you can ask me to add them or modify the source code and compile it yourself.

That's it, you're done!