Demo of jQuery.PrettyTextDiff

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

by damyanpetev

HTML

<script src="https://rawgit.com/lqc/google-diff-match-patch/master/javascript/diff_match_patch.js"></script>
<script src="https://rawgit.com/shikher/jQuery.PrettyTextDiff/01222bca2a130133168dd43c9c289322f7ed9e20/jquery.pretty-text-diff.js"></script>
<link rel="stylesheet" href="http://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">This si text 1</td>
                <td class="changed">This is text one</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td class="original">Today is Jan the 24th, 2013</td>
                <td class="changed">Today is January the 25th of the year 2013</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td class="original">A mouse is here</td>
                <td class="changed">A sofa is here</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td >Some text here.</td>
                <td >Some more text which can be passed to this function.</td>
                <td class="diff2"></td>
            </tr>
         </tbody>
    </table>
    <div>
        <label class="checkbox">
            <input id="cleanup" type="checkbox" value="true" checked="checked" />
            Clean up diff - read more about
            <code>diff_cleanupEfficiency</code>
            <a href="http://code.google.com/p/google-diff-match-patch/wiki/API"
            target="_blank">
                here
            </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=button1]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        cleanup: $("#cleanup").is(":checked"),
        diffContainer: ".diff1"
        
    });
});

$("input[type=button2]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        cleanup: $("#cleanup").is(":checked"),
        originalContent: "Some text here.",
        changedContent: "Some more text which can be passed to this function.",
        diffContainer: ".diff2"
    });
});