Added web example.

README.md

@@ -59,16 +59,16 @@ Note that some cases may omit a particular flag field. Comparison on the flag fi
 
 ## Examples
 
-Using in Node
+Basic example in Node
 
 ```js
 require('colors')
 var jsdiff = require('diff');
 
-var one = 'beep boop'
-var other = 'beep boob blah'
+var one = 'beep boop';
+var other = 'beep boob blah';
 
-var diff = jsdiff.diffChars(one, other)
+var diff = jsdiff.diffChars(one, other);
 
 diff.forEach(function(part){
   // green for additions, red for deletions
@@ -84,6 +84,35 @@ Running the above program should yield
 
 <img src="images/node_example.png" alt="Node Example">
 
+Basic example in a web page
+
+```html
+<pre id="display"></pre>
+<script src="diff.js"></script>
+<script>
+var one = 'beep boop';
+var other = 'beep boob blah';
+
+var diff = JsDiff.diffChars(one, other);
+
+diff.forEach(function(part){
+  // green for additions, red for deletions
+  // grey for common parts
+  var color = part.added ? 'green' :
+    part.removed ? 'red' : 'grey';
+  var span = document.createElement('span');
+  span.style.color = color;
+  span.appendChild(document
+    .createTextNode(part.value));
+  display.appendChild(span);
+});
+</script>
+```
+
+Open the above .html file in a browser and you should see
+
+<img src="images/web_example.png" alt="Node Example">
+
 * [Full online demo](http://kpdecker.github.com/jsdiff)
 
 ## License

examples/node_example.js

@@ -1,10 +1,10 @@
 require('colors')
 var jsdiff = require('../diff');
 
-var one = 'beep boop'
-var other = 'beep boob blah'
+var one = 'beep boop';
+var other = 'beep boob blah';
 
-var diff = jsdiff.diffChars(one, other)
+var diff = jsdiff.diffChars(one, other);
 
 diff.forEach(function(part){
   // green for additions, red for deletions
@@ -14,4 +14,4 @@ diff.forEach(function(part){
   process.stderr.write(part.value[color]);
 });
 
-console.log()
+console.log();

examples/web_example.html

@@ -0,0 +1,20 @@
+<pre id="display"></pre>
+<script src="../diff.js"></script>
+<script>
+var one = 'beep boop';
+var other = 'beep boob blah';
+
+var diff = JsDiff.diffChars(one, other);
+
+diff.forEach(function(part){
+  // green for additions, red for deletions
+  // grey for common parts
+  var color = part.added ? 'green' :
+    part.removed ? 'red' : 'grey';
+  var span = document.createElement('span');
+  span.style.color = color;
+  span.appendChild(document
+    .createTextNode(part.value));
+  display.appendChild(span);
+});
+</script>