Syntax Highlighting in Blogger

Each code snippets must be represented with a highlighted and standard formatted style to make them more readable. However in blogger posts and other HTML pages, it is difficult to handle. Highlighting every reserved keywords (such as private, void, class in java language), keeping indention, spacing and other formatting issues as is in IDE even requires more effort than writing content of page.

After a short research on internet, I found two ways to highlight syntax of code snippets in blog posts. The first one is embedding SyntaxHighlighter project's CSS and Javascript source files into blog template. The second one is simply creating a github.com account and creating gists at gist.github.com.

---

How to Use Gist to Insert Highlighted Code Snippets in Blog

Definition: Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

First login to www.github.com; then go to gist.github.com. Then, insert code snippet into text area; select programming language (e.g. Java), press "Create Public Gist" button. Finally, press embed to copy html code snippet that will be embedded to your blog entry where code snippet will locate in.

1) Code snippet insertion panel

2) After code snippet insertion; detail page comes

A gist looks like below after inserting tags into blog entry in "Edit HTML" mode.

---

How to Use Syntax Highlighter Project in Blogger

Definition: SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

How does it work?
SyntaxHighlighter runs in the browser which means it doesn’t care what kind of server you have. In fact, SyntaxHighlighter can run locally on your computer without any web server at all and best of all it runs in virtually every modern web browser.

Open blogspot control panel, go to Design > Edit HTML page in order to add css and javascript codes into blog template.

CSS and JavaScript definitions are inserted from the line where I marked as a comment (INSERT SYNTAXHIGHLIGHTER RELATED CODE).

The required CSS imports are shCoreEclipse.css and shThemeEclipse.css which defines the format of code snippets as popular open source Eclise IDE.
It is reqeuired to use brush javascript of related programming language to highlight its codes if exists. I am going to use Java, SQL, XML and CSS code snippets in my blog entries, so I am importing shBrushJava.js, shBrushSql.js, shBrushXml.js and shBrushCss.js. There are also a plenty of javascirpt files that are responsible for another programming languages which is easy to understand form their name.

<!-- Include required JS files -->
<script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>  
 
<!-- Include *at least* the core style and default theme -->
<link href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

Finally, as seen below add script tags and the JavaScript codes, before closing body tags in order to trigger formatting of code snippets and enable blogger mode of API.

All in all, an example java snippets is seen like below.

public class Demo {

 public static void main(String[] args) {
  System.out.println("Syntax Highlighting in Blog Demo.");
 }
}