Compare changes in two different CodeMirror textareas

Question

I am trying to use two different textareas displaying the same code, but with one master, and another copy. In the copy textarea, I would like to highlight changes, something similar to what GitHub offers when we do some changes.

I was wondering if this is possible or if someone did something similar before. Any advice is welcome.

Answer 1

The CodeMirror Merge add-on is exactly what you want. See the demo, which matches your description.

---

At first I thought you wanted a separate diff, displayed in a div below your textareas rather than inside one of the textareas, and I wrote the following answer. It may still be useful.

Check out the google-diff-match-patch library, used by the CodeMirror Merge add-on. It’s not a drop-in solution, but it looks like you could use diff_main to get a list of original and changed text, and then display that yourself. The library also provides diff_prettyHtml, which outputs example markup for the diff.

Answer 2

Mergely is another option that produces very nice visual diffs using CodeMirror and is distributed under the GPL, LGPL and MPL licenses. It's GitHub repo is here.

Also Prettydiff which isn't very pretty, but when you click the "execute" button at the bottom you get an interesting visual diff. Not sure if the diff itself is using codemirror or just the two input texts that the diff is generated from.