A wrapper around Google's
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
) but recommend developers to write their own - and the given method is
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
diff_match_patch library and a simple user-experience.
This blog post explains things in a bit more detail.
From the jQuery plugins site.
First, include the libraries
jquery.pretty-text-diff.jsin your page, something like:
Next sprinkle a bit of JS
- something like:
Check out the customizable options below.
Optionally, style the diff
<del>as much as you want. A simple example is in the jsfiddle demo.
- Either mark up your HTML to use the default selectors, or use these options:
|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.|
npm(comes with node now)
npm install -g coffee-script uglify-js
cake buildto produce the output JS (minified)
git tag x.y.z
git push && git push --tags
- Fork this repo
- create a feature/bugfix branch:
git checkout -b branch_name
- 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
Copyright (c) 2013 Arnab Deka. Licensed under MIT LICENSE for details.