Tuesday, November 22, 2011

adding syntax highlighting on blogger

This of course started because I wanted to add syntax highlighting to this blog. That led me to an excellent post

http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html

by Matt Ball about the subject; it worked, and all was well. However in a later bash script post, I noticed it was incorrectly treating a variable as a comment because it had a # in it. This led me to the git project of the syntax highlighter Mr Ball had used (and everyone seems to use), the excellent and excellently named SyntaxHighlighter by alexgorbatchev:

https://github.com/alexgorbatchev/SyntaxHighlighter

After playing around with it a bit, I updated the single line comment code for bash syntax highlighting as well as the auto-loader to allow it to take a path to a directory rather than having to specify the URL of every script that can be used. I created a git project on google code to host the files and and all seems well again. The only thing I had to do on blogger was add these lines to the end of the head section of the template


And then whenever you want to add some syntax highlighting to your post, simply edit the html to include the wrapper for the brush


here is my xml

or


console.log('hello javascript syntax highlighted world');

The idea to use google code to host the static files came from this post

http://blogazor.blogspot.com/2011/06/freely-host-css-js-other-static-files.html

by the good people at blogazor. They use svn so if you would like to use svn that howto is a great read.

No comments:

Post a Comment