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.
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)
Add
Modify the stylesheet to get the coloring you prefer
Setup
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
onload="prettyPrint()"
to your
document's body tag.
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:
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
@hai india:I'm Glad you found it usefull :)
Post a Comment