Highlighting your code on Blogger.com

I don't know why but there is no plugin for highlighting code in blogger.com.
Maybe I was searching in the wrong place but steel I've faced this problem and I'd like to share my solution.

First let's find a free, nice highlighter online. I'd like to say that this one http://alexgorbatchev.com/wiki/SyntaxHighlighter is the most interesting I could found in Internet.

Then configure the layout of your page. Go to: Layout -> Edit HTML. In this section you'll have ability to change your html-template manually. All you need is to add some javascript and css files in the header. You can use my configuration.

<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushBash.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCpp.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCSharp.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCss.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJava.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js' type='text/javascript'/>
 <script src='scripts/shBrushPhp.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPlain.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushVb.js' type='text/javascript'/>
 <script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js' type='text/javascript'/>
 <link href='http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css' rel='stylesheet' type='text/css'/>
 <link href='http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
 <script type='text/javascript'>
  SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.0.278/scripts/clipboard.swf&#39;;
  SyntaxHighlighter.all();
 </script>
 <style type='text/css'>
  .syntaxhighlighter  div.line {
   margin:0px;
  }
 </style>

This is for configuration.
Now, how you should write your article?
Where ever you'd like to insert a piece of code you need to use this element:

<pre class="brush:html">
    &lt;h2&gt;Hello world!&lt;/h2&gt;
</pre>

The result is:

<h2>Hello world!</h2>

If you need another language to use you need to change a attribute class. For example for java you need to set it in class="brush:java".

Another cool feature is a string-highlighting. To do so you need to add string in class attribute of pre element. For example I need to highlight a 2-nd line of code, just type highlight: [2]. To highlight more then 1 line of code just use comma to separate the lines numbers highlight: [10, 11, 12, 13, 14]

An example with highlighting of lines 9 and 11

package ua.ekta.observer.bean.basis;
import java.util.List;

import ua.ekta.observer.bean.IBean;
import ua.ekta.observer.persistence.system.IDomain;

public interface IBasisManager extends IBean {
 
 IDomain detectDomain(String url);
 List<IDomain> loadBases();
 void clearBases();
}

Have a nice code :)