How to insert and highlight code in your post

After a long search of how to insert and highlight perl, bash or ruby code in my post I found SyntaxHighlighter developed by Alex Gorbatchev. SyntaxHighlighter works for Blogger, Wordpress and many other blogs or any html page. I'll explain what I did to finally have pieces of code in my posts of Blogger.

1. Open your blog at blogger.com. Login if requested and select/click on your blog name.
2. Go to template -> Edit HTML -> Proceed
3. Find (CTRL+F) the </html> tag and just before it copy and paste this section of 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. Save your template

Now any post is ready to use highlighted code. There are two ways to do this: using pre or script tags.

Using <pre> tag:

1. Open the post you want to edit or create a new one.
• Go to Posts and select one post clicking on Edit or click on New Post button. 
2. Select the HTML view and find the section of code to highlight.
3. Insert this code before the section of code:
   

   <pre  class="brush: html">
   

4. Insert this code at the end of the code:
   

   </pre>
   

Using <script> tag:

1. Open the post you want to edit or create a new one.
• Go to Posts and select one post clicking on Edit or click on New Post button. 
2. Select the HTML view and find the section of code to highlight.
3. Insert this code before the section of code:
   

   <script  type="syntaxhighlighter" class="brush:html"><![CDATA[
   

4. Insert this code at the end of the code:
   

   ] ]></script>
   

The possible changes to the headers are:

• Change the theme. The list of themes is here, you just need to replace one css theme by other. For example, replace the default theme (shThemeDefault.css) by RDark theme (shThemeRDark.css).
• Remove brushes you will not need or add brushes not included. For example, I replace the VB brush (shBrushVb.js) by the Bash brush (shBrushBash.js) and remove others like C# (shBrushCSharp.js) and Java (shBrushJava.js).

The possible changes to the <pre> and <script> tags are:

• Change the brush type according to the code type. The different brushes are here. 
• Remove the numbers for each line adding "gutter: false;" inside the class. For example:
  

  <pre  class="brush: html; gutter: false;">
  HTML Code
  </pre>
  

For more information check out the sources below.

Sources:

• http://alexgorbatchev.com/SyntaxHighlighter/
• http://alexgorbatchev.com/SyntaxHighlighter/integration.html