How to Add SyntaxHighlighter into Blogger Blog

You can read more about the rationale and benefits of inserting source code into SyntaxHighlighter in the previous post here. This post will show you the detailed steps of how to add SyntaxHighlighter into your blogger blog so that your source code will appear in more readability form.


1. Download the file from Syntax Highlighter.

2. Rename the zip folder name to “syntaxhighlighter”.

3. Upload the whole folder “syntaxhighlighter” to a self-hosted server, in the root directory preferably.

4. Log into your blogger and go to the tab “Design” and click on “Edit HTML”.

5. Before you make any changes to the template, you are advised to download a copy for backup so please click on “Download Full Template”.

6. Then click on “Expand Widgets Template” to expand and look for the word as you are going to insert some code into it.

7. Change all the URL in the following code from "http://yourdomain.com/" to the URL which you have uploaded the folder in step 2.

8. Copy the code and paste it into the template before  which you have found in step 6.

<link href='http://yourdomain.com//syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://yourdomain.com//syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://yourdomain.com//syntaxhighlighter/scripts/shBrushPerl.js' type='text/javascript'></script> 

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://yourdomain.com//syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

9. Now you can put this tag <pre></pre> to your code snippet to make it work, for example as follow:

<pre class="brush: js">
Your script here
</pre>

Another real-life example:

/* Post Divider */

body.custom div.post {
background: transparent url(URLOfImage/nameOfImage.jpg);
border: none;
background-repeat: no-repeat;
background-position: bottom center;
}
/* End of Post Divider */

There is, however, one problem. If you are trying to insert code with left angle brackets, it must be HTML escaped, eg < must be replaced with &lt;

For example instead of writing

if (counter <=10)

It should be the following

if (counter &lt;= 10)

You can check out more information on its configuration of SyntaxHighlighter at its website.