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

index.php
js
--run_prettify.js

index.php

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.

Skins

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

Example:
<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.
Example:
<code class="prettyprint linenums:10">

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

I hope that you found this best script.




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="">