What problem are we trying to fix exactly?
We want to color highlight the syntax of any text in a code block without modifying our html. Google Code Prettify does a great job of highlighting any syntax enclosed in a block with the "prettyprint"
<pre class="prettyprint">). However, we want it to highlight syntax in ANY
<pre> block. That way you don't have to mess with updating your html every time you make a new code block.
Furthermore, since this needs to drop into an html document that presumably already has CSS defined for
<code> elements, we need to take special care to override such code, lest we do all this work for naught or--worse--use some CSS styles from the parent document and some defined here. To be honest though, I'm sure you will still have that problem on some sites. If you encounter such issues and manage to solve them, please send me a pull request and I'll add your new or modified theme.
Copy the code in below into your web page, at the end of the file right before
The end of your html template should look like this:
###STEP TWO (optional:) Customize the theme by pointing the first line to a different CSS file, such as this one: http://github.mnewton.com/prettify-wrapper/themes/prettify.css
There are a few themes included in the google-code-prettify package itself:
jmblog maintains some nice themes:
Lastly, there are some themes hosted here. They are mostly slightly modified versions of the ones found above. Check them out at: