How to install the Google Code Prettify plugin

If you have a WordPress blog and want to add some cool syntax highlighting for your code, you can try Google Code Prettify.

WordPress plugins are usually quite simple to use, but there are some little precautions to follow. First of all:

• Download the Google Code Prettify plugin for WordPress
• Install it, but DO NOT activate it.

You shouldn’t activate it immediately, because if you do an edit while your plugin is activated, you could break it: some files could display an (inactive) label next to the file name, and all you can do to repair it is to delete and reinstall the whole plugin. Read more about this problem.

Once you enabled your plugin, you should wrap <pre class="prettyprint"> for every instance of code you have in all your articles. This can be tremendously annoying if you already have hundreds of articles in your WordPress blog, so I’ll tell you 5 quick ‘n’ straightforward steps to get around this problem.

1. Edit google_code_prettify.php and search for this line:

     return preg_replace_callback("/<pres+.*classs*="prettyprint">(.*)</pre>/siU",
   

2. Substitute the above line with the line below:

     return preg_replace_callback("/<pre><code>(.*)</code></pre>/siU",
   

3. Open prettify.js and search for this line:

     if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
   

4. Substitute the above line with the line below:

     if (true) {
   

5. Go edit your prettify.css and delete the reference about the .prettyprint class. Then you’ll want to add some more code to avoid the awful text overflow, that often causes layout problems. Have a look at this short article from CSS-Tricks: you need that code. I’m (shamelessly) copy pasting it below:

     pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
     }
   

And that’s all. You can now enable your plugin and see your cute and readable code. ;-)

However, my solution is a bit hackish. I mean, when a new plugin update will be released, you’ll lose all the edits. If you don’t want this to happen, don’t update your plugin. Or if you’re looking for a separate, cleaner solution, I suggest you read this article (dead link).