Google Prettify

is embedded script that makes source-code snippets prettier in HTML. Syntax highlighting is one of the basic needs of the website that feature programming code. Something that makes source-code snippet prettier. Google’s Prettify is free and lightweight script that makes your code awesome.

This step-by-step guide explains the techniques that you can use to easily embed the Google Prettify script in your website.

Directory Structure



All you need to do is download google prettify script and save it to js folder as run_prettify.js. Download Prettify script from here. Now, Include JavaScript into your webpage in <head> tag. Put code snippets in <pre class="prettyprint"> html tag and it will be pretty printed automatically.

Do not forget to encode greater than sign (>) or lower than sign (<) in code snippet. You can also use <pre>, <code> or <xmp> elements with the “prettyprint” class.


Google Prettify provides verious skins for code snippets. You can use different skins by adding skin parameter in url.

<script src="js/run_prettify.js?skin=sunburst"></script>


Creative Google Prettify Sgeek

“sunburst” is default skin provided by Google Prettify.


Line Numbering

The linenums class with prettify tag tells the prettyprinter to insert an <ol> element and <li> elements around each line so that you get line numbers.

<code class="prettyprint linenums">

You can add line numbering start at specific number by adding line number with linenums class.
<code class="prettyprint linenums:10">

The class linenums:10 makes line numbering starts with 10.

I hope that you found this best script.

  1. I was just finding lightweight syntax highlighter and this is the best one. Thanks Gopal for this awesome article.
    By the way, how can i create custom theme in Google Prettify?

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">