Side by side html diff_match_patch

Question

import diff_match_patch

old_string = """I'm selfish, impatient and a little insecure. I make mistakes,
I am out of control and at times hard to handle. But if you can't handle me at my worst,
then you sure as hell don't deserve me at my best."""

new_string = """I'm selfish, impatient and a little secure. I don't make mistakes,
I am out of control and at times hard to handle difficult things. But if you can't handle me at my worst,
then you sure as hell don't deserve me at my best."""

class SideBySideDiff(diff_match_patch.diff_match_patch):

    def old_content(self, diffs):
        """
        Returns HTML representation of 'deletions'
        """
        html = []
        for (flag, data) in diffs:
            text = (data.replace("&", "&amp;")
                    .replace("<", "&lt;")
                    .replace(">", "&gt;")
                    .replace("\n", "<br>"))

            if flag == self.DIFF_DELETE:
                html.append("""<del style=\"background:#ffe6e6;
                    \">%s</del>""" % text)
            elif flag == self.DIFF_EQUAL:
                html.append("<span>%s</span>" % text)
        return "".join(html)

    def new_content(self, diffs):
        """
        Returns HTML representation of 'insertions'
        """
        html = []
        for (flag, data) in diffs:
            text = (data.replace("&", "&amp;")
                    .replace("<", "&lt;")
                    .replace(">", "&gt;")
                    .replace("\n", "<br>"))
            if flag == self.DIFF_INSERT:
                html.append("""<ins style=\"background:#e6ffe6;
                    \">%s</ins>""" % text)
            elif flag == self.DIFF_EQUAL:
                html.append("<span>%s</span>" % text)
        return "".join(html)



diff_obj = SideBySideDiff()
result = diff_obj.diff_main(old_string, new_string)
diff_obj.diff_cleanupSemantic(result)

diffs = diff_obj.diff_main(old_string, new_string)
old_record = diff_obj.old_content(result) 
new_record = diff_obj.new_content(result)

However, as in the example of

http://agiliq.com/blog/2014/05/google-diff-match-patch-library/

I cannot seem to get it working that it shows the results side by side in a HTML file. How is it possible for me to fix this?

Just to make sure: you are aware that it's html, so you have to display it in a web-browser? `cannot seem to get it working` is not telling me much. — then0rTh, Jun 21 '17 at 14:25
yup I'm aware that the output will be in HTML. I did the same with the difflib module, but don't know how to do it with Google's diff_match_patch — PRIME, Jun 21 '17 at 14:51

score 2 · Answer 1 · answered Jun 21 '17 at 15:21

To get the same side by side look like in the blogpost, you need to put old_record and new_record in 2 separate divs and style it(mby add header).

<div style="max-width: 45%; float: left; margin: 2%;">
    <h1> Old </h1>
    put old_record here
</div>
<div style="max-width: 45%; float: left; margin: 2%;">
    <h1> New </h1>
    put new_record here
</div>

Side by side html diff_match_patch

1 Answers1