The Google Code Prettify is a JavaScript module that allows syntax highlighting of any code snippets on a HTML page.  Setting this up on any web page is a simple 3 step process, and is supported on most common browsers.

[Demo]   (Based on:  prettify-21-May-2009.zip)
[Download Source Files]

1) Include the JavaScript and CSS file within the head of the HTML page

2) Include the action onload=”prettyPrint()” within the body element

3) Wrap your code snippet between pre tags: <pre class=”prettyprint”>…</pre>

Notes:

For code snippets containing “<” and “>” characters, “;&gt” and “;&lt” must be replaced in order to work, for example HTML code.

You can explicitly specify the code language to render, for example in Step 3 we can extend this by forcing it to Perl, using <pre class=”prettyprint lang-perl“>…</pre>
The languages available are “bsh”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, “java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, “xhtml”, “xml”, “xsl”.

Line numbers can be included by added <span> 1: </span> at the beginning of each line (this is a bit of manual work though).

Lisp, CSS, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers, and WikiText languages are also support by inclusion of src/lang-*.js files.  See FAQ.

Related Posts:

1. Overlay & Slideshow Images with Lightbox 2
2. Get URL Variables in JavaScript & HTML
3. A Better LightBox Using jQuery

http://www.mydomain.com/index.html?month=January&day=Tuesday

To read the variables within the index HTML file, we must process the URL string entirely, since there is no built-in functions which magically does it.  The following JavaScript demonstrates this:

function getUrlVars()
{
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for(var i = 0; i < hashes.length; i++)
  {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

To use the variables, we run the following to extract the values:

var myHash = getUrlVars();
alert(myHash['month']);   // prompts the value 'January'
alert(myHash['day']);     // prompts the value 'Tuesday'

The jQuery lightBox plugin (by Leandro Vieira Pinho) uses the jQuery JavaScript library to create an overlay effect of opening up images on top of a web page, and creating a navigable slideshow view.  See my demo below.

Setting this up on your own web page is an easy 2-step process: include the JavaScript and CSS on the webpage header, and then call the jQuery function.  The only change required is on the header.

This plugin is an improvement over the LighBox2 plugin which was demonstrated earlier, because we didn’t need to modify our link tags to activate it, thanks to the jQuery element selector.

[Demo]
[Download Source Files]

Related Posts:

1. Overlay & Slideshow Images with Lightbox 2
2. Syntax Highlight Code On Any Page Using Google Code Prettify
3. Get URL Variables in JavaScript & HTML

The Lightbox2 plugin uses the Prototype and Scriptaculous JavaScript libraries to create an overlay effect of opening up images on top of a web page, and creating a navigable slideshow view.

Setting this up on your own web page is an easy 2-step process: include the JavaScript and CSS on the header, and then on each link tag embed the rel=”lightbox” and title=”my caption” attributes.

[Demo]
[Download Source Files]

Notes: I had to include the following CSS due to the background overlay didnt cover the entire page.

<style type="text/css">
body{margin: 0; padding:0;}
</style>

Related Posts:

1. A Better LightBox Using jQuery
2. Syntax Highlight Code On Any Page Using Google Code Prettify
3. Get URL Variables in JavaScript & HTML