How to display comparison of two versions of a blog post?

Question

Suppose I develop a blog web application with a blog post editor. The blog posts are stored as JSON files. The web application renders these JSON files to display blog posts with their titles, headers, images, etc.

A user can save different versions of a blog post. I want to provide a new screen to compare two different versions of the same post and merge them if necessary. I don't want to expose the JSONs so it cannot be a JSON comparison tool.

How would you display the comparison of the post versions ? Do you have any examples ?

Answer 1

Have you looked at commercial source control merge programs? Not to use them but just to see how they format stuff? FYI I use Beyond Compare myself. Having 3 windows can be user friendly ... version 1, version 2, merged version. Also 3 way merges are best if you have access to an earlier version that both later version were derived from. 2 way merge without an original you can only note differences (not which version has the newer change). Optionally with 3 way merge most changes can be merged automatically, only conflicts occur where the exact same lines have been changed in both later versions. That case requires user to decide ... i.e. keep 'a', keep 'b', keep both 'a''b', keep both 'b''a'

Answer 2

This is how confluence does it. I find it pretty intuitive.

Answer 3

Have you tried the Linux diff command? Maybe the output is everything you need to put on the screen.
GitHub use colors to represent modifications, green for additions, red for deletion. Wikipedia use two columns to do so, but I don't think it is suitable for small phone screens.
And on StackExchange, you can see the difference like this, on the answer edited page.