Adding a Syntax Highlighter

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.

SyntaxHighlighter 3.0.83 whats new?

SyntaxHighlighter 3.0 has quite a few new tricks up its sleeve. There are a number of new features that are worth mentioning here.

• Dynamic Brush Loading
• No Flash Copy To Clipboard
• Code Selection
• Block Title
• CommonJS
• Improved CSS support

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.

What does that mean for you?
That means you can install SyntaxHighlighter in your home page, blog, CMS, documentation CD or any other web page. It literally takes just a couple of minutes to get going and you will have beautifully highlighted code for all your users to admire.

License

You may use any SyntaxHighlighter project under the terms of either the MIT License or the GNU General Public License (GPL) Version 3.
The MIT License is recommended for most projects. It is simple and easy to understand and it places almost no restrictions on what you can do with a SyntaxHighlighter project.
If the GPL suits your project better you are also free to use a SyntaxHighlighter project under that license.
You don’t have to do anything special to choose one license or the other and you don’t have to notify anyone which license you are using. You are free to use a SyntaxHighlighter project in commercial projects as long as the copyright header is left intact.

• MIT License
• GPL

Extensions & Integration

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.

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

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

• Paste it on top of </head> this code.
• 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.

1. Go to Quick Escape.
2. Paste your HTML code into the text box and click on "Convert to escaped characters ?" button.
3. After conversion, you can use the converted HTML code in between
4. <pre class="brush: html"> and </pre> tags.
5. 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 (highlighted in 'RED').

<!--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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
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.