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
Download
From npm.js.
Usage
First, include the libraries
- include
jquery.js,diff_match_patch.jsandjquery.pretty-text-diff.jsin 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 |
| originalContentv1.0.4+ | 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. |
| changedContentv1.0.4+ | 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
nodeandnpm(comes with node now) - Install
coffeescriptanduglify:npm install -g coffee-script uglify-js cake buildto produce the output JS (minified)- Increment the version in the coffeescript (and compiled/minified) javascript source and the
package.jsonfile. git tag x.y.z- Push:
git push && git push --tags && npm publish
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.
