Syntax Highlighting for your website

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Syntax Highlighting for your website

You have let’s say a blog, like this one you are reading right now, and you will post code snippets on it. You want your readers to see that clear and highlighted not just plain text because is hard to read for the eye of a programmer.

Google code pretify.

You can download this tool from here.  It has various themes that you can choose from and it is really simple to use also.

Installation.

You have two files that you downloaded. One is a css file and another one is a js file. The css file should be included between your <head></head> tags like this:

The js must be included before the enclosing body tag like this:

The syntax highlighter will search for a “pre" or “code" element in your page that has a class of prettyprint. Let’s see an working example:

Next, we want to call the “prettyprint” function that highlights the code inserted between “pre” or “code” tags. We do that after we included the “prettify.js” in the bottom of our page like this:

That’s it ! You will obtain a highlighted syntax on your website. You can even change your theme by modifying the css, or by choosing from a already existing theme repository from here.

An output example before/after.

google prettify

google prettify

Request an article ←