Saturday, March 5, 2011

Posted by SAMAJ SHEKHAR

2

Google Code Prettify


For a long while code snippets on my blog were inconsistently formatted as i always kept experimenting with CSS for code and every post came out with its own formatting, sometimes i used tools on web to format my code and give me the HTML, so it looked very awful. Recently i found out "Google Code Prettify", its a java-script code which contains those lexers to recognize the code and format it appropriately accompanied by a CSS which you can of-course customize it to suit your needs. Its easy to use and supports almost all languages, from java to Haskel and all C family languages. Though there is a readme at Google code website here are the steps to add it to your blog or website.

Setup

  • Download a distribution
  • Include the script and style-sheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)
  • <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
  • Add onload="prettyPrint()" to your document's body tag.
  • Modify the stylesheet to get the coloring you prefer
  • Usage

    Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty printed. The original
    class Voila {
    public:
      // Voila
      static const string VOILA = "Voila";
    
      // will not interfere with embedded tags.
    }
    Prettier (I have applied custom CSS on my blog so it will be different then what you'll get)
    class Voila {
    public:
      // Voila
      static const string VOILA = "Voila";
    
      // will not interfere with embedded tags.
    }
    So as it says you will need to download it on your own server and then link it in your script tag, but for your (and my own) convenience i have hosted it at Bitbucket DVCS Source Code hosting site. On the download page you will find the minified versions of the prettify.js(19kb) and prettify.css(1kb)

    So your tags become:

    <link href="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.js"></script>

    2 comments:

    hai india said...

    thank you it too useful for me. If you need php/java/Jsp code snippets then go there
    http://www.hscripts.com/codes-snippets/index.php

    SAMAJ SHEKHAR said...

    @hai india:I'm Glad you found it usefull :)

    Post a Comment