Syntax Highlighting Blogger Code

I finally decided to get some decent syntax highlighting going on blog posts. I hunted around and decided to use the rather cool SyntaxHighlighter. I did run into a few problems though. I've document the steps I've used to get it working, below:

1. Download the latest version of SyntaxHighlighter
2. Unrar the contents into a temporary directory.
3. Host the exploded files on a web server somwhere or in subversion. (which has its own challenges. See below)
4. Edit your blogger layout (Layout -> Edit HTML)
5. Add the following lines just above the end </html> tag, changing http://pinthura.googlecode.com/svn/blogs to match your own path:

<br /><link href="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link><br /><br /><br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shCore.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushJava.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushXml.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushCss.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"/> <br /><br /><script language="javascript" src="http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/shBrushSql.js"/><p/><br /><br />


The above adds support for the following:

1. C#
2. Java
3. XML
4. CSS
5. Javascript
6. SQL

To add additional language support add the appropriate brush from the http://your_path_/dp.SyntaxHighlighter/Scripts/ directory.

6. Add the following just before the </body> tag:

<br /><script language="javascript"> <br /><br />window.onload = function () {<br /><br /> dp.SyntaxHighlighter.ClipboardSwf = 'http://pinthura.googlecode.com/svn/blogs/syntaxhighlighter/dp.SyntaxHighlighter/Scripts/clipboard.swf'; <br /><br /> dp.SyntaxHighlighter.BloggerMode();<br /><br /> dp.SyntaxHighlighter.HighlightAll(code);<br /><br />}<br /></script><br />


7. To use highlight code use:

<pre name="code" class="java" >
//your java code here
</pre>

or

<textarea name="code" class="java" >
//your java code here
</textarea>

If you are using a language other than java then check its alias here.


Gotha's with SVN and CSS and HTML files

One problem that had me stumped was that the CSS files could not be read from SVN although they were actually in SVN. The problem stems from using SVN as a HTML source directly and having the correct MIME types. CSS and HTML files by default are returned from http-accessed SVN as "text/plain" which is incorrect. For CSS files we need text/css and for html we need text/html. To achieve this do the following:

Update your ~/.subversion/config file:
1. Uncomment the line enable-auto-props = yes
2. Add the following lines:
*.html = svn:mime-type=text/html
*.css = svn:mime-type=text/css

Now if you import your files into SVN it will get returned with the correct mime types when access via the web.

References

1. SyntaxHighlighter
2. Blog without an Important Name