Adding Google Code Prettify to WordPress

If you are like me and you have a blog where you are showing people code examples a lot you need a clean way to show code. I’ve used a few but I really like Google Code Prettify. You would think it would be easy to add it to WordPress but it’s not because it acts strange with WordPress.

A simple work-around is to add this WordPress Plugin by Dean Lee. I couldn’t find it out WordPress so I did the manual upload of the plugin but downloading the zip file, unzipping it and uploading the folder to the wp-content/plugins folder of my remote install of WordPress.

Now to see if it works I’ll show you some cool CSS to style keyboard buttons to highlight shortcut keys. Did you know that there was an HTML tag called kbd? Well, there is. Copy the HTML file below with embedded CSS.

[prettify]




Untitled Document

ctrl+command


[/prettify]

Save the file as test.html and view it in the browser. You should see something like this:

ctrl+command

Pretty cool, huh?

Update: I tried Syntaxhighlighter but I couldn’t get it to work on my site. I spent about an hour and then gave up. A common problem people have is with child themes (which kingluddite is). You are supposed to make sure wp_footer() is in the footer. I did this and it still didn’t work. I looked for plugin conflicts and it didn’t work. I changed themes and it didn’t work. I then reverted to my original google prettify and found a new sunburst theme. It is supposed to have line numbers but I have yet to figure that one out. Happily I found that I don’t need to escape html characters which is great.

One Reply to “Adding Google Code Prettify to WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *