mandag den 30. juli 2012

Code syntax highlighter in blogger blogspot

Syntax highlighting is working!

There are a lot of blogs on this, but this is what I needed to do to get it to work:

Like every one else I use the fantastic SyntaxHighlighter by Alex Gorbatchev. To get it to work for me I had to host the scripts from SyntaxHighlighter my self. Loading it as described at http://alexgorbatchev.com/SyntaxHighlighter/hosting.html did not work for me. It resulted in a redirect that the browser couldn't handle. Any way, with that in place, I could configure the theme to load the files. This was done by Template > Edit HTML in the blogger admin page. This yield a warning that you have to be careful and know what you are doing. So I was careful while I added:
<link href='http://A_HOST/syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://A_HOST/syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://A_HOST/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>  
<script src='http://A_HOST/syntaxhighlighter/scripts/shBrushCss.js' type='text/javascript'/>  
<script src='http://A_HOST/syntaxhighlighter/scripts/shBrushJava.js' type='text/javascript'/>  
<script src='http://A_HOST/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'/>  
<script src='http://A_HOST/syntaxhighlighter/scripts/shBrushSql.js' type='text/javascript'/>  
<script src='http://A_HOST/syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'/>  

<script type='text/javascript'>
//<![CDATA[  
     SyntaxHighlighter.all();
//]]>  
</script>
just below the <title> line and before the <b:skin> tag, and hit the [Save Template] button.

Now all I have to do in order to pretty code is wrap the code in a pre tag that defines how to highlight like:

<pre class="brush: html" name="code">

Thats it.