This Guide Shows How To Use jQuery & CSS to Add WordPress Diff Manually on Needed Post. You Can Offer Option Button to Show Diff Nicely. We at rare case need to add a WordPress Diff Plugin to automatically add the diff option, such need is usually for custom WordPress site like we described in the guide for creation of WordPress site for Publishing Scholarly Academic Journals.
Diff is a comparison tool that calculates and displays the differences between two files – texts in our case. Diff is line-oriented, it tries to determine the smallest set of deletions and insertions to create one file from the other. Both humans and machines can understand the changes.
Typically, diff is used to show the changes between two versions of the same file.
---
Add WordPress Diff Manually on Needed Post : The Things Needed
For this guide, needed elements are few :
|
1 2 |
https://github.com/arnab/jQuery.PrettyTextDiff https://github.com/AbhishekGhosh/google-diff-match-patch/ |
Additionally you’ll need a bit jQuery, CSS and HTML to implement.
It is better to know :
Add WordPress Diff Manually on Needed Post
We are using the HTML class class="original", class="changed" and class="diff" in this HTML, which is a demo for jQuery.PrettyTextDiff via jsFiddle, as the code breaking our CSS, see the changes by clicking diff button :
We need to load these two jQuery files embedding in the post :
|
1 2 |
diff_match_patch.js Remove jquery.pretty-text-diff.js |
Plus a snippet :
|
1 2 3 4 5 |
$("input[type=button]").click(function () { $("#wrapper tr").prettyTextDiff({ cleanup: $("#cleanup").is(":checked") }); }); |
Plus a CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ins { background-color: #c6ffc6; text-decoration: none; } del { background-color: #ffc6c6; } div, table, h3, input, label { margin: 10px; } table th { width: 30%; } |
Also, we are using Bootstrap CSS in this demo.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript" src="https://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script> <script type="text/javascript" src="https://rawgithub.com/arnab/jQuery.PrettyTextDiff/master/jquery.pretty-text-diff.js"></script> <script type='text/javascript'> $("input[type=button]").click(function () { $("#wrapper tr").prettyTextDiff({ cleanup: $("#cleanup").is(":checked") }); }); </script> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/> |
Add WordPress Diff Manually on Needed Post : Easier Method
As the method described above is too complex, needs hand coding, we would suggest to use the Post Revision Display plugin and conditionally load the PHP snippet to force the manual method on per page instead of single.php.
Diff actually demands processing at the backend, hence without jQuery it is probably better to think to implement in conventional way, modified for your need.
