Code Highlighting using Google Prettify

 

 Code beautifying with Google Prettify

 

In this blog I am going to give a detailed description of How to use Google prettify in a webpage or in a blog post.

Setup

Include the script tag below in your document in a head tag:

<script src= 
"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js">
 

 

 

</script>


Look at the skin gallery and pick styles that suit you.


You can choose your choice of skins
some of them are as follows..

  • default
  • sons-of-obsidian
  • doxy
  • sunbrust
  • desert

 Example

<script src= 
"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js? lang=css&amp;skin=desert"></script>

 

 

Usage

Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed.
 
 

Example:  <pre class="prettyprint"> class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded <a href="#voila2">tags</a>. } </pre>
For Line numbers add the following style in head <style> .prettyprint ol.linenums > li { list-style-type: decimal; } </style> Example code for linenumbers: <pre class="prettyprint linenums"> foo bar bis sed awk cat </pre> The following example starts line number from 3 <pre class="prettyprint linenums:3"> </pre> 
 
 
 
 
 
 
 
 
 
 
 
 
 
File extensions supported by default include:
 
 "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Comments

Popular posts from this blog

Using javascript pass form variables to iframe src

Creating a new PDF by Merging PDF documents using TCPDF

Import excel file into mysql in PHP