Oct 23, 2012

SyntaxHighlighter is finally configured

I have tried to set up syntax highlighting in my blog several times. Some approaches were working for some time other weren't. Finally I decided to install and configure SyntaxHighlighter.
Here is a link to the official site: http://alexgorbatchev.com/SyntaxHighlighter/
There is a brief and generic description how to set up this javascript library:
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
Also I have found a number of very old and actually incorrect guides how to integrate Blogger with   SyntaxHighlighter. None of them gave me what I was looking for. So I had to spent a bit more time to figure it out.

Here are steps:

1. Go to your blog template editor
2. Backup you current template
3. Select "Edit HTML", then "Proceed"
4. Copy whole HTML to your favorite editor
5. Find string "</head>"
6. Insert following snippet right before "</head>"
7. Add/remove brushes from the list: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 8. Find string "</body>"
9. Insert following snippet right before it

10. Done.

Now you can create a new post in the blog, switch to HTML mode and insert some test block of code:

when you show a preview it should render somthing like a snippet in the p.9.

No comments: