Adding a Syntax Highlighter to your Blogger blog

Tweet

If you have problems with Syntax Highlighter, post them here.

Syntax or code highlighting is important particularly when you need to show code examples on your blog.

It is always a big task to read codes on a blog or a website without syntax highlighting, though they are enclosed with code tags. By integrating the syntax highlighter on a blog or a website, readers can read the code examples easier.

There are so many free syntax highlighting scripts available on many websites. Most of the scripts are written in JavaScript, though some of them are powered by other programming languages such as Phyton or Ruby.

I believe "SyntaxHighlighter by Alex Gorbatchev" is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new "brush" for your language if it is not supported by default.

Adding Syntax Highlighter to your blog

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code </head>
3. Copy the below code

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

4. Paste it on top of </head> this code.
5. Preview your template and if everything works fine, then save it.

Make the script work

You have just added the script to your blog. If you want to highlight code in your post, then you need to use a tag in order to make your Syntax Highlighter work properly. There are two tags and you can use any one on your blog.

1. <pre> tag
2. <script> tag

<pre> tag

When writing a new post, you need to use <pre> tag in the post. The code of your post needs to go in between <pre class="brush:html"> and </pre> tags, in order to highlight your code properly. See the screenshot below.


If you are posting HTML code, then you have to use 'html' brush in the <pre> tag.

<pre class="brush:html">
Your 'HTML' code goes here
</pre>

Similarly, for CSS code use 'css' brush in the <pre> tag. Here is a list of brushes you can use for your blog post.

<pre class="brush:css">
Your 'CSS' code goes here
</pre>

Note for Bloggers

There is a small issue with <pre> tag. When you post HTML code in blogger post between
<pre class="brush:html"> and </pre> tags directly, you might get an error like this.

Your HTML cannot be accepted
Stop showing HTML errors for the body of this post

To get rid of this error, You have to convert raw HTML to escape characters.

• Go to Quick Escape.
• Paste your HTML code into the text box and click on "Convert to escaped characters →" button.
• After conversion, you can use the converted HTML code in between
  <pre class="brush: html"> and </pre> tags.
• Now, HTML code will render correctly on your blog.

<script> tag

This is almost same as <pre> tag, but the code of your post needs to go in between <script type="syntaxhighlighter" class="brush:html"><![CDATA[ and ]]></script> tags.

<script type="syntaxhighlighter" class="brush:html"><![CDATA[
Your 'HTML' code goes here
]]></script>

If you are posting PHP code, then you have to use 'php' brush in the <script> tag.

<script type="syntaxhighlighter" class="brush:php"><![CDATA[
Your 'PHP' code goes here
]]></script>

If you use <script> tag, then you don't have to convert HTML to escape characters. But I suggest you to use <pre> tag.

Themes for your Syntax Highlighter

Syntax Highlighter 2.0 introduced custom CSS themes. This means that by switching out just one CSS file you can completely change the look and feel of the highlighted syntax. A small number of popular color themes are included with Syntax Highlighter and you can easily make your own. Just click the css theme below to see how it looks...

• shThemeDefault.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

• shThemeDjango.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

• shThemeEclipse.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

• shThemeEmacs.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

• shThemeFadeToGrey.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

• shThemeMidnight.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

• shThemeRDark.css

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

After selecting the theme of your choice, just copy the code below the theme and replace the default theme link in the 'Syntax Highlighter' code.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Customizing your code

You don't need to paste the exact code on your blog. You can choose brushes which you use on your blog. If you are posting HTML & CSS code on your blog and want to highlight HTML or CSS syntax, then use HTML & CSS brushes as shown below and remove the rest of the code.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

You can add or remove brushes according to your needs.

Brushes

Here is a list of brushes you can use on your blog. If you don't find a brush you are looking for, here is a long list of brushes you can download.

Now you have got beautiful Syntax Highlighter on your blog.