diff2html
diff2html 从 git diff 或统一的 diff 输出生成漂亮的 HTML diff。
特性
- 支持git和统一差异
- 逐行和并排差异
- 新旧行号
- 插入和删除的行
- GitHub 的视觉风格
- 代码语法重点
- 线相似度匹配
- 轻松选择代码
在线示例
前往 diff2html
发行版
- jsdelivr CDN
- WebJar
- Node Library
- NPM CLI
- 从 jsdelivr 手动使用或构建项目：
- Browser / Bundle
- 解析器和 HTML 生成器
- bundles/js/diff2html.min.js -- 包括差异解析器和 html 生成器
- 包装程序和帮助程序添加了语法突出显示，同步滚动和其他不错的功能
- bundles/js/diff2html-ui.min.js --
包含diff2html的包装，其中包含所有
highlight.js支持的语言的Highlight - bundles/js/diff2html-ui-slim.min.js --
包含diff2html的包装以及“最常见”
highlight.js支持的语言 - bundles/js/diff2html-ui-base.min.js --
包含diff2html的包装，但不包含
highlight.js实现。 您可以使用它而无需突出显示语法，也可以通过使用自己喜欢的语言传递自己的实现。
- bundles/js/diff2html-ui.min.js --
包含diff2html的包装，其中包含所有
- 解析器和 HTML 生成器
- NPM / Node.js 库
- ES5
- lib/diff2html.js -- 包括差异解析器和 html 生成器
- lib/ui/js/diff2html-ui.js -- 包含 diff2html 的包装，其中包含所有
highlight.js支持的语言 - lib/ui/js/diff2html-ui-slim.js --
包含 diff2html 的包装，其中包含
highlight.js支持的"最常用"语言 - lib/ui/js/diff2html-ui-base.js
- ES6
- lib-esm/diff2html.js -- 包括差异解析器和 html 生成器
- lib/ui/js/diff2html-ui.js -- 包含 diff2html 的包装，其中包含所有
highlight.js支持的语言的高亮显示 - lib/ui/js/diff2html-ui-slim.js --
包含 diff2html 的包装，以及
highlight.js支持的"最常用"语言 - lib/ui/js/diff2html-ui-base.js --
包含diff2html的包装，但不包含
highlight.js实现。 您可以使用它而无需突出显示语法，也可以通过使用自己喜欢的语言传递自己的实现
- ES5
- Browser / Bundle
用法
Diff2Html 可以按发行部分中列出的各种方式使用。两种主要方法是：
- Diff2Html：直接从库中使用解析器和 html 生成器，可以完全控制使用生成的 json 或 html 可以做什么。
- Diff2HtmlUI：使用此包装器可以轻松将 html 注入 DOM 并为 diff 添加一些不错的功能，例如语法突出显示。
在下面，您可以找到有关每个选项的更多详细信息和示例。
Diff2Html 用法
为了在浏览器中正确加载，您始终需要在最终 HTML 中包含样式表。
导入样式表
<!-- CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
Diff2Html API
差异的 JSON 表示
function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];
差异的漂亮的 HTML 表示
function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {}): string;
Diff2Html 配置
HTML输出接受带有配置的Javascript对象。可能的选择：
- outputFormat：输出数据的格式：“逐行”或“并排”，默认为“逐行”
- drawFileList：在 diff 之前显示文件列表：true 或 false，默认为 true
- diffStyle：显示每行的差异级别：单词或字符，默认为单词
- matching：匹配级别：“行”用于匹配行，“单词”用于匹配行和单词或“无”，默认为无
- matchWordsThreshold：单词匹配的相似度阈值，默认为0.25
- matchingMaxComparisons：最多执行一次这样的比较，以匹配更改块的行，默认值为2500
- maxLineSizeInBlockForComparison：进行比较的块中最大行的最大字符数，默认为200
- maxLineLengthHighlight：仅当行小于此值时才执行差异更改高亮显示，默认值为10000
- renderNothingWhenEmpty：如果差异在比较中没有变化，则不呈现任何内容：true 或 false，默认为 false
- createdTemplates：具有以前编译的模板的对象，以替换 html 的某些部分
- rawTemplates：具有未编译模板的原始对象的对象，用于替换 html 的某些部分（有关可能的模板的更多信息，请查看 src/templates）
Diff2Html 浏览器
导入样式表和库代码
<!-- CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" /> <!-- Javascripts --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
它现在可以作为一个名为Diff2Html的全局变量使用
document.addEventListener('DOMContentLoaded', () => {
var diffHtml = global.Diff2Html.html('<Unified Diff String>', {
drawFileList: true,
matching: 'lines',
outputFormat: 'side-by-side',
});
document.getElementById('destination-elem-id').innerHTML = diffHtml;
});
Diff2Html NPM / Node.js
const Diff2html = require('diff2html');
const diffJson = Diff2html.parse('<Unified Diff String>');
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
document.getElementById('destination-elem-id').innerHTML = diffHtml;
Diff2Html 示例
（恕删略。请查看源自述文件）
许可
版权所有 2014 年至今，Rodrigo Fernandes。根据 MIT 许可条款发布。
致谢
该项目的灵感来自 Scott González 的 pretty-diff。
（The first version translated by vz on 2020.08.06）
