Best Syntax Highlighter for Blogger Part 2

In our quest to come up with a syntax highlighting tool for Blogger that does not use Javascript, we have downloaded JEdit and installed Copy2HTML plugin for JEdit. We will now edit our Blogger template to load some Style definitions. To do this, click on Design –> Edit HTML and click on the checkbox “Expand Widget Templates”. Now, copy the entire HTML that is shown there and save it as a backup.

Blogger HTML Template Edit for Syntax Highlighting

We have to add a few tags to the style sheet in the HTML definition. These style sheet modifications would help in the formatting of the code that you will be displaying in your blog post.Search for “pre,code” and add the following style sheet changes below that;

pre {
border: 1px solid #c0c0c0;
padding: 5px;
height:500px;
overflow: scroll;
width: 100%;
}

Once this is done, search for “#Comments” and add the following style sheet definitions above that code.

.post-body pre .syntax-NULL {
color: #000000;
}
.post-body pre .syntax-COMMENT1 {
color: #cc0000;
}
.post-body pre .syntax-COMMENT2 {
color: #ff8400;
}
.post-body pre .syntax-COMMENT3 {
color: #6600cc;
}
.post-body pre .syntax-COMMENT4 {
color: #cc6600;
}
.post-body pre .syntax-DIGIT {
color: #ff0000;
}
.post-body pre .syntax-FUNCTION {
color: #9966ff;
}
.post-body pre .syntax-INVALID {
background: #ffffcc;
color: #ff0066;
}
.post-body pre .syntax-KEYWORD1 {
color: #006699;
font-weight: bold;
}
.post-body pre .syntax-KEYWORD2 {
color: #009966;
font-weight: bold;
}
.post-body pre .syntax-KEYWORD3 {
color: #0099ff;
font-weight: bold;
}
.post-body pre .syntax-KEYWORD4 {
color: #66ccff;
font-weight: bold;
}
.post-body pre .syntax-LABEL {
color: #02b902;
}
.post-body pre .syntax-LITERAL1 {
color: #ff00cc;
}
.post-body pre .syntax-LITERAL2 {
color: #cc00cc;
}
.post-body pre .syntax-LITERAL3 {
color: #9900cc;
}
.post-body pre .syntax-LITERAL4 {
color: #6600cc;
}
.post-body pre .syntax-MARKUP {
color: #0000ff;
}
.post-body pre .syntax-OPERATOR {
color: #000000;
font-weight: bold;
}

.post-body pre .gutter {
background: #dbdbdb;
color: #000000;
border-right: 2px solid black ;
margin-right: 5px ;
}
.post-body pre .gutterH {
background: #dbdbdb;
color: #990066;
border-right: 2px solid black ; 
margin-right: 5px ;
}

Save the template and we are good to go. So simple, we have done the basic setup that is required to enable syntax highlighting on your blog. In part 3 of this blog post, we will discuss how to format your posts so that your code / programs are syntax highlighted.

Syntax Highlighting in Blogger Using JEdit - Part 1
Syntax Highlighting in Blogger Using JEdit - Part 2
Syntax Highlighting in Blogger Using JEdit - Part 3