Syntax highlighting is one of the basic needs of websites that feature code. I’m using Google Code Prettify or Prettyprint to highlight code on this website.

Why I use Google Code Prettify

Here are some reasons why I prefer using Google prettify to highlight and decorate the code bits.

  1. Lightweightedness
  2. Flexibility
  3. Dependency-free
  4. Easy theming

Because it’s fast, efficiently-programmed and supports various code themes for syntax highlighting, it can be one step closer to speeding up your website.

GCP takes care of all the decorated code you see here. Rest of this article covers its installation and implementation step-by-step on our website.

Setting up Google Code Prettify

  1. Start with downloading the latest version of here.
  2. Extract the files from the downloaded archive.
  3. Look for the prettify.js and prettify.css in the extracted files. Upload these two files on your web server.
  4. The JavaScript file will help assigning styles to the code bits, and the CSS file will carry those styles.
  5. Lets add the CSS file in our website. Add the below given code above the </head> (closing head tag) in your site’s HTML. 
    <link rel="stylesheet" href="http://yoursite.tld/prettify.css" />

    Change the URL path above to your hosted prettify CSS file’s path.

  6. Now, we are going to call prettify.js and then initialize the Google Code prettify on our site. Place the following block of code just before the </body> (closing body tag) in your website’s HTML: 
    <script src="http://yoursite.tld/prettify.js"></script>
<script>
  window.onload = (function(){ prettyPrint(); });
</script>

    Again, be sure to replace the URL in the above code to your hosted prettify JS file’s URL.

  7. Finally, save all the changes.

That’s it. We’re done with the installation.

Implemnation

Add .prettyprint class to any code block and it gets highlighted automatically. Below is a working example of GCP.

<pre class"prettyprint">&lt;style&gt;
/* This is some CSS code */
.red { color: red; }
.green { color: green; }
.blue {color: blue; }
&lt;/style&gt;</pre>

Make sure to make your code HTML-friendly by parsing characters like <, >, & and others.

The Code prettify is smart enough to detect the code type and then style it automatically. Here is the list of the languages and styles it supports and provides for code highlighting.

Currently, I’m using a modded GitHub-style theme created by jmblog. You may also create a color theme by yourself, but that I’ll cover some other day.

Read further