Site icon SumTips

Implement Google Prettify Code Highlighting in WordPress the Manual Way

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

How to Install Google Prettify on WordPress

To install Prettify, first download the highlighter from here: 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">
		<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(); ?>

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>

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>

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.


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:

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:

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! 🙂

Exit mobile version