对于所有的编辑改动提供 diff 显示以及 blame 功能

blame 即追溯某个文件每行的最后一次修改。GitHub 支持此功能。

目前发现了几个 js 可以提供前端 diff 显示：

https://github.com/kpdecker/jsdiff BSD License
https://github.com/cemerick/jsdifflib BSD License
https://github.com/rtfpessoa/diff2html MIT License （注：此库仅支持显示 diff，不支持生成 diff）

除 3 外其他均支持前端生成 diff。可以将 1 或 2 与 3 搭配。1 和 2 也支持前端显示 diff，不过效果比 3 差些。

[ ] Diff
[ ] Blame

附 1：对 1 和 3 的测试

<html>

<head>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

    <!-- Javascripts -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/diff@5.0.0/dist/diff.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

    <script>
        $(document).ready(function () {
            $(".autoUpdate").change(function () {
                const targetElement = $('#destination-elem-id').get(0);
                const configuration = {
                    matching: 'lines', outputFormat: 'side-by-side',
                    synchronisedScroll: true, drawFileList: false
                };
                const diffString = Diff.createPatch("BulitinFileName", $("#input1").val(), $("#input2").val(), "", "");
                const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
                diff2htmlUi.draw();
            });
        });

    </script>
</head>

<body>
    <textarea class="autoUpdate" id="input1"></textarea>
    <textarea class="autoUpdate" id="input2"></textarea>
    <div id="destination-elem-id"></div>
</body>

</html>

Ahrwing / mcmod

对于所有的编辑改动提供 diff 显示以及 blame 功能 #742