SumTips
SumTips
How To?

Implement Google Prettify Code Highlighting in WordPress the Manual Way

Print View Mobile View

I share a lot of code snippets here, but have never implemented syntax highlighting. I was about to do so in the old theme, but had to retract at the last moment and change the theme because of some backend issue. Hopefully would do so soon, and this guide would be handy then and probably to you too, now, if you are planning to add this feature on your site.

There are many code syntax highlighter plugins available in the WordPress plugin repository, however, if you are looking for a way to embed the feature in a WordPress theme, there’s nothing better than Google Code Prettify. Prettify is a JavaScript module and CSS file that automatically identifies codes snippets, its language and adds syntax highlighting.

Google Prettify in WordPress
Google Prettify in WordPress

How to Install Google Prettify on WordPress

To install Prettify, first download the highlighter from here: http://code.google.com/p/google-code-prettify. Extract archive, and inside the ‘src’ folder you will find two files named prettify.js and prettify.css. Copy these files to somewhere in your WordPress theme directory. If you have dedicated directories for JavaScript and CSS files, you can place those files in them.

Next, open your theme’s header.php file in a text editor and include the two files within the <head>...</head> tags. Your code should look something like this:

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<title>SumTips</title>
		<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/stylesheet/prettify.css" type="text/css" />
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/prettify.js"></script>
		<?php wp_head(); ?>
	</head>
<body>

If you are worried about any performance loss with the JavaScript file in your page header, it can also be placed at the bottom of the page, just before the closing </body> tag. Placed, it should look something like this:

	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/prettify.js"></script>
	</body>
</html>

Conclude installation by adding onload="prettyPrint()" to your document’s <body> tag:

<body onload="prettyPrint()">

You can move this to the bottom of the page as well.

	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/prettify.js"></script>
	<script>prettyPrint();</script>
	</body>
</html>

How to Use Google Prettify on WordPress

Prettify works by styling any code within a <pre> or <code> tag having the class “prettyprint”. So just remember to add that class to code blocks while writing your post in the post editor. It should look like this:

<pre class="prettyprint">...</pre>
<code class="prettyprint">...</code>

Now it’s all pretty.

Extras

Prevent WordPress from changing code
You codes should be highlighting correctly now, however, they may be formatted incorrectly. This is because of content filters that are applied to each post by WordPres before they are rendered. Here are three ways to fix this:

  • Disable code manipulation by JavaScript in visual editor: To prevent the editor from modifying your code, write your posts in the HTML editor, or completely disable it by going to Users > You User Account and checking the box that says “Disable the visual editor when writing”.
  • Encode code into an entity-encoded markup: You could either use this tool SimpleCode [http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process] to encode your code or install a WordPress plugin like WP_CodeShield [http://wordpress.org/extend/plugins/wp-codeshield/] that automatically encodes everything within the <code> tag into an entity-encoded markup.
  • Install Preserve Code Formatting plugin [http://wordpress.org/extend/plugins/preserve-code-formatting/]: This plugin will prevent WordPress from encoding HTML text and you also don’t have to write <pre> tags for multiline code.

Enable code line numbering
Want line numbers in your code? Just add linenums class to the <pre>tag.

<pre class="prettyprint linenums"> ... <pre>

If you’d like to start line count from a particular number, specific starting line by adding a colon and a line number to the end of that class:

<pre class="prettyprint linenums:8"> ... <pre>

Prevent a portion of markup from being marked as code
You can use the nocode class to let the script known any part of the markup that is not code.

<pre> ... <span class="nocode">This is not code</span> ... </pre>

Scrollbars in <pre> tags
With scroll bars enabled, you don’t have to worry about character length of your codes and they can be longer in width than your post content. Prettify doesn’t come with this behavior out of the box, but you can add it with the following CSS:

pre.prettyprint {
	display: block;
	overflow: auto;
	width: auto;
	max-height: 600px;
	white-space: pre;
	word-wrap: normal;
	padding: 10px;
}

Just place this CSS somewhere in your theme’s style.css file.

Prettify Themes
If you aren’t happy with the default highlighter theme, you can style it to your liking by customizing the CSS. You can changes rules like this:

.com { color: #008000; } // Comments
.str, .tag { color: #A31515; } // Strings/tags
.kwd, .atv { color: #0000FF; } // Keywords
.typ { color: #2B91AF; }  // Types
.lit, .atn { color: #FF0000; } // Numbers
.pun, .pln { color: #000000; } // Punctuation
.dec { color: purple; } // Declaration

Or, you can get a ready made stylesheets from these places:

  • Theme gallery: http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html
  • GitHub: https://github.com/felixmc/Google-Prettify-Oblivion-Theme

To apply it, simply create a new stylesheet within the CSS directory and paste the CSS into it. Also, update the stylesheet include link within the head section of the template.

That’s all! 🙂

Related tips: