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 :-
3. Enclose the text that you want to highlight in <code></code> block
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:
Post a Comment