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.
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.
Thank you very much for figuring this out. I could get it to work on my site.
ReplyDeleteJust one warning: one must make sure to join the keywords line after copying. Somehow it doesn't work when the line is broken in two.
I also modified the regex for the line comment so that it can start anywhere, not just at the beginning of a line.
Glad it helps. I wrapped the keywords line for readability; I will revert it back. I will also update the regex. Thanks.
Delete