Thursday, November 17, 2011

Syntax highlighting on blogger

I always wanted a 'wiki' like functionality on blogger so that my technical posts are more readable (Highlighting commands, posting source code with line numbers etc..)

Some good options are :-

1. Using JEdit and Code2Html plugin - http://thinktibits.blogspot.com/2011/04/best-syntax-highlighter-for-bloggerpart.html

2. Alex Gorbatchev's Syntax Highlighter - http://alexgorbatchev.com/SyntaxHighlighter. Here is an example of how it is used on blogger - http://abhisanoujam.blogspot.com/2008/12/blogger-syntax-highlighting.html

3. Using google code prettify - http://code.google.com/p/google-code-prettify/. See the README file for implementation details. Here is a sample blog that uses google code preffify - http://blog.js-development.com/2008/01/finally-syntax-highlighting-on-my-blog.html

If you just need a simple highlighting mechanism, try editing the design template as explained below.

1. Open the template html (Template -> Edit HTML)



2. Look out for </b:skin> and add below piece of code as shown :-

code {background:whitesmoke; font-family: Arial; display:block; border:1px solid #999999; padding:10px;}

]]></b:skin>


3. Enclose the text that you want to highlight in <code></code> block

<code>
Your text here...
</code>


No comments: