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("&", "&")
                    .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)

但是，如示例

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

我似乎无法让它在 HTML 文件中并排显示结果。我怎么可能解决这个问题？

Answer 1

要获得博客文章中相同的并排外观，您需要将old_record和new_record放在 2 个单独的div 中并设置样式(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>