Code comparison jQuery plugin

Question

I am looking for a plugin which differentiates between the code revision (versions). As a demonstration, think as if I saved a code in the database, and I saved the second version of the code, I want to keep them side by side and want the plugin to highlight the differences just like Stackoverflow does and Wordpress with the post revision.

Incase if still anyone's confused, I'll add a screenshot of what am talking about..

^{Screen from Stackoverflow}

---

^{Screen of Wordpress Post Revision from my PC (localhost)}

---

Requirements :

• Should be easy to manage, I don't need any 3rd party scripts
• Not much heavy
• Only code comparison is required, no images and other media will be embedded.
• Should be able to detect even a minor change like a space

I want to use this on my website so please don't suggest me sublime plugins, I already have them on my system.

---

Edit: I got one over here but am looking for better alternatives, I will be pulling two code revisions from the database, but this plugin generates difference in third element where I want to compare two blocks straight away.

Answer 1

Stackoverflow uses an in-house tool, but you can try the libraries below.

google-diff-match-patch

jQuery.PrettyTextDiff is actually a jQuery wrapper for this.

The Diff Match and Patch libraries offer robust algorithms to perform the operations required for synchronizing plain text.

Not sure if it's close enough but it does highlight differences, though you will undoubtedly have to do your own revision management since this isn't something a jQuery plugin can or should be doing.

Demo

Mergely

It's a significantly heavier library that includes an entire online editor.

Mergely shows you changes to documents side-by-side so you can clearly see what changed from one version to the next.

_{(source: mergely.com)}