Saturday, August 11, 2012

Syntax highlighting in blogger


Here's how I post code snippets with syntax highlighting in blogger.

1. Go to edit template
Put these lines under the <head> tag:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

2. Change the body tag.
From <body ... >
to   <body onload='prettyPrint()' ... >

3. When you make a new post, edit html and put these tags around your code:
<pre class="prettyprint">
// your code goes here.
</pre>

Here's some sample prettified code:
int main(int argc, char * argv[])
{
printf("Hello world. I'm using prettyprint.\n");
}
Note: If you change the template in blogger, the changes to the template will probably be lost, so you will have to repeat steps 1 and 2.

If you want to post xml code, you will need to 'encode' the xml first.
1. Enter the code with one of these tools.
http://centricle.com/tools/html-entities/
http://www.spacefem.com/tutorials/makecode.php
This does some simple things like turning "<" into "lt", which stands for less than.

2. Put the encoded code into the prettyprint tags mentioned above.

No comments:

Post a Comment