Saturday, March 3, 2012

Brush your code!

Lately I have been playing around with SyntaxHighlighter to highlight code syntax on my blog for the new programming language, Frege. Here are some simple steps on that process which would be useful for anyone wanting to create new/enable SyntaxHighlighter.

1) Copy and paste the following just before '</head>'in the blog template

You don't need to include all the 'shBrushxxx.js' scripts. Just include the brushes you need for your blogs. The scripts in the format are inbuilt brushes. The last "<script>" is the one I created for the language 'Frege'. Yon can refer this guide on creating new brushes: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/custom.html

2) After step 1 (You have included all the css and scripts for brushes), you can use it in your blogs like this ('Edit html' for your blog), or You can use "script" method: The difference is that when you use "script", your contents will be automatically html-escaped whereas in "pre" method, you need to escape those special characters.

3) If you want to customize some styles, you can add it before "]]></skin>" like this, The last style "syntaxhighlighter" is to disable scrollbars in chrome which adds scrollbars even when there is nothing to scroll. IE and firefox correctly render without scrollbars.
Thats all you need to enable SyntaxHighlighter for your blog.