I often want to include snippets of code in my instructional blog posts, so to make my blog posts easier to read, I decided to add syntax-highlighting to my blog tonight. There are various syntax highlighting solutions out there, but we use google-code-prettify on code.google.com and it's worked well enough there, so I went with what I knew.
Here's how I added it to my Blogger blog:
- Click the Design tab and "Edit HTML".
- After the
metatab in the HTML, paste these two includes for the JS and CSS:
- Search for
prettyPrint();If that tag doesn't exist, then just create a script tag at the bottom yourself.
- Now, whenever you're posting, add the prettyprint class to your pre or code tags:
<pre class="prettyprint"> var i = 2 + 4; </pre>
For more details on using the prettify library, see the readme.