Giter VIP home page Giter VIP logo

jquery.prettytextdiff's Introduction

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

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!

Contributing

  • Fork this repo
  • create a feature/bugfix branch: git checkout -b branch_name
  • Develop
  • Push to your repo: git push origin branch_name
  • Submit a PR

License

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

jquery.prettytextdiff's People

Contributors

arnab avatar justinabrahms avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.