jquery-prettytextdiff

1.0.4 • Public • Published

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.

Package Sidebar

Install

npm i jquery-prettytextdiff

Weekly Downloads

1,081

Version

1.0.4

License

MIT

Last publish

Collaborators

  • or9ob