我有兴趣看到一个好的 diff 算法，可能是用 Javascript 编写的，用于渲染两个 HTML 页面的并排差异。这个想法是 diff 将显示差异rendered HTML.
为了澄清一下，我希望能够看到并排的差异as渲染输出。因此，如果我删除一个段落，并排视图就会知道如何正确间隔。
@乔希正是如此。尽管它可能会以红色或其他方式显示已删除的文本。这个想法是，如果我对 HTML 内容使用所见即所得编辑器，我不想切换到 HTML 来进行差异。也许我想与两个所见即所得编辑器并排一起完成。或者至少以对最终用户友好的方式并排显示差异。
您可以使用另一个不错的技巧来显着改善渲染的 HTML 差异的外观。尽管这并不能完全解决最初的问题，但它会对渲染的 HTML 差异的外观产生重大影响。
并排渲染的 HTML 将使您的差异很难垂直对齐。垂直对齐对于并排比较差异至关重要。为了改进并排差异的垂直对齐，您可以在差异的每个版本中的“检查点”处插入不可见的 HTML 元素，其中差异应垂直对齐。然后，您可以使用一些客户端 JavaScript 在检查点周围添加垂直间距，直到两侧垂直对齐。
更详细地解释一下：
如果您想使用此技术，请运行 diff 算法并插入一堆visibility:hidden <span>s或很小<div>根据差异，您的并排版本应该匹配的地方。然后运行 JavaScript，找到每个检查点（及其并排的邻居），并向页面上较高（较浅）的检查点添加垂直间距。现在，您渲染的 HTML 差异将垂直对齐到该检查点，并且您可以继续修复并排页面其余部分的垂直对齐。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
