Adding a syntax higher to your blog

Recently went through the effort of adding syntax highlighting to this blog. Its a worth while and somewhat easy process.. There can be a bit of leg work to up date existing posts but its worth the effort.

1. 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/shThemeRDark.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/shBrushBash.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script language='javascript'>
   SyntaxHighlighter.brushes.Clojure = function()
   {
           // Contributed by Travis Whitton
   
           var funcs = &#39;:arglists :doc :file :line :macro :name :ns :private :tag :test new add-hook alias alter and apply assert class cond conj count def defmacro defn defun defstruct deref do doall dorun doseq dosync eval filter finally find first fn gen-class gensym if import inc keys let list loop map ns or print println quote rand recur reduce ref repeat require rest send seq set setq sort str struct sync take test throw trampoline try type use var vec when while&#39;;
   
           this.regexList = [
                   { regex: new RegExp(&#39;;[^\]]+$&#39;, &#39;gm&#39;),                           css: &#39;comments&#39; },
     { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: &#39;string&#39; },
                   { regex: /\[|\]/g,                                               css: &#39;keyword&#39; },
     { regex: /&#39;[a-z][A-Za-z0-9_]*/g,                                 css: &#39;color1&#39; }, // symbols
     { regex: /:[a-z][A-Za-z0-9_]*/g,                                 css: &#39;color2&#39; }, // keywords
     { regex: new RegExp(this.getKeywords(funcs), &#39;gmi&#39;),             css: &#39;functions&#39; }
               ];
    
    this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
   }
   
   SyntaxHighlighter.brushes.Clojure.prototype     = new SyntaxHighlighter.Highlighter(); 
   SyntaxHighlighter.brushes.Clojure.aliases       = [&#39;clojure&#39;, &#39;Clojure&#39;, &#39;clj&#39;, &#39;lisp&#39;];
   </script>
   <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
   SyntaxHighlighter.config.strings.expandSource = &#39;show source&#39;;
   SyntaxHighlighter.config.strings.viewSource = &#39;view source&#39;;
   SyntaxHighlighter.all();
   </script>
   <!--SYNTAX HIGHLIGHTER ENDS-->
   

2. Note that i have a custom hightlighter in this set for lisp (emacs configs etc)
   
3. Go to Blogger Dashboard > Layout > Edit HTML.
   
4. Press CTRL+F to find the code </html>.
   
5. Add the code to the location before the final </b:section-contents>. This depends highly on what blogger template you have, so you may need to experiment with it a bit. You want to add the syntax highlighter to the end of the page because if the 3rd party site providing javascript is down or under heavy load your blog wont load its content.
   
6. You can alter the Color Theme from "shThemeRDark.css" with different ones as explained here
   http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
   


7. Then to highlight a section of code add the following around it in the blogger edit/new posts screen.
   

   <pre class="brush:cpp">
   //code here
   </pre>
   

   The item after the "brush:" is altered to match your code syntax. The possibles are listed here; http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/. Of course you need to check that you have installed the brush to get the highlight working.
   


Other Refs;

http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html