jQuery.PrettyTextDiff

A wrapper around Google's diff_match_patch library. Google's library is awesome and can be fine-tuned in multiple ways, but their API is a bit awkward, probably cause they support the same API in 8 different languages.

Also, the library does not provide any beautification of the diff-ed output. They provide a reference implementation (look for diff_prettyHtml in the API docs ) but recommend developers to write their own - and the given method is not customizable .

This library is an alternative to embedding 30+ lines of cryptic JS in your code. In short, it tries to bridge the gap between the awesome diff_match_patch library and a simple user-experience.

This blog post explains things in a bit more detail.

Demo

jsfiddle demo

Download

From the jQuery plugins site.

Usage

First, include the libraries

• include jquery.js, diff_match_patch.js and jquery.pretty-text-diff.js in your page, something like:

<script src="/path/to/jquery.min.js" type="text/javascript"></script>
<script src="/path/to/diff_match_patch.js" type="text/javascript"></script>
<script src="/path/to/deal_override_requests.min.js" type="text/javascript"></script>

Next sprinkle a bit of JS

• something like:

  $(selector).prettyTextDiff({
    // options
  });

Check out the customizable options below.

Optionally, style the diff

• Style <ins> and <del> as much as you want. A simple example is in the jsfiddle demo.

Customizable options

• Either mark up your HTML to use the default selectors, or use these options:

option	default	explanation
originalContainer	.original	CSS-selector for the element that holds the original text. $(elem).text() will be used to extract the text.
changedContainer	.changed	CSS-selector for the element that holds the changed text. $(elem).text() will be used to extract the text.
diffContainer	.diff	CSS-selector for the element where the diff will be put.
cleanup	true	Whether diff_match_patch's diff_cleanupSemantic() will be used or not. true will produce a human-redable diff, whereas false will be more to the liking of machines. See the demo for the effect.
debug	false	see some debug output in your browser's console
originalContent	None	Pass the original content as a parameter in your JS file, instead of creating an element in your HTML code to extract this content.
changedContent	None	Pass the changed content as a parameter in your JS file, instead of creating an element in your HTML code to extract this content.

Development

• Install node and npm (comes with node now)
• Install coffeescript and uglify: npm install -g coffee-script uglify-js
• cake build to produce the output JS (minified)
• Increment the version in the coffeescript (and compiled/minified) javascript source and the jquery-json file.
• git tag x.y.z
• Push: git push && git push --tags

Contributing

• Fork this repo
• create a feature/bugfix branch: git checkout -b branch_name
• Develop
  • Just change the coffeescript source. When your PR is merged, I will generate the JS flavors and update the versioning.
• Push to your repo: git push origin branch_name
• Submit a PR

License

Copyright (c) 2013 Arnab Deka. Licensed under MIT LICENSE for details.