Demo of jQuery.PrettyTextDiff

https://github.com/arnab/jQuery.PrettyTextDiff

by Rob Sedgwick

HTML

<script src="http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<script src="https://rawgithub.com/arnab/jQuery.PrettyTextDiff/master/jquery.pretty-text-diff.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="wrapper">
     <h3>
        Demo of
        <a href="https://github.com/arnab/jQuery.PrettyTextDiff" target="_blank">
            jQuery.PrettyTextDiff
        </a>
    </h3>

    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>Original</th>
                <th>Changed</th>
                <th>Diff</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="original"><html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">\n<body>\n<table style=\"font-family: 'Arial','sans-serif'; font-size: 10.0pt;\" border=\"0\" width=\"780\">\n<tbody>\n<tr>\n<td style=\"width: 680px;\">\n<p style=\"font-size: 22.0pt;\">Deka Bank Test<br /> <span style=\"font-size: 16.0pt; color: #7399c6;\">@(Model.CurrentDateAndTime.ToString(\"MMMM yyyy\"))</span></p>\n</td>\n<td style=\"width: 100px;\"><img src=\"http://system.feprecision.com/images/clients/gsam/gsamlogo_78x92.png\" alt=\"GSAM Logo\" /></td>\n</tr>\n<tr>\n<td style=\"border: none; border-bottom: solid #7399C6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.85pt;\" colspan=\"2\"> </td>\n</tr>\n<tr>\n<td style=\"padding-top: 15px;\" colspan=\"2\">\n<p>Hello,</p>\n<p>Please find attached: <i>Fund Ratios</i> as of <i>@(((DateTime)Model.Files[0].Meta[\"DataAsAtDate\"]).ToString(\"dd MMM yyyy\"))</i></p>\n<p>If you have any queries with this report please contact GSAM Fund data at the address below or alternatively your GSAM representative.</p>\n</td>\n</tr>\n<tr>\n<td>\n<p>Kind regards,</p>\n<p><b>GSAM Fund Data</b><br /> <a...

SCSS

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

div, table, h3, input, label {
    margin: 10px;
}

table th {
    width: 30%;
}

JavaScript

$("input[type=button]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        cleanup: $("#cleanup").is(":checked")
    });
});