以HTML格式在客户端使用JavaScript显示Git差异

Question

简单来说，我需要关于以下内容的信息：

1. 一种将Git diff格式（在github api中获得）转换为某种html格式的方法，类似于实际github网站上的格式。如果没有这样的东西，
2. 我想了解git diff文件的格式，以便编写自己的。

- Alexis Dumas

---

有没有人有任何想法？ - Alexis Dumas

正如Jaybeecave在下面提到的（我已经编辑了答案），你可以考虑使用https://diff2html.xyz/。 - VonC

我不明白为什么一些人喜欢使用“标记”来关闭问题，规则是严格的，但人是灵活的。应该更多地鼓励好事情，而不是关闭它们。 - Carson

Answer 1

更新2017年（两年后）

Jaybeecave在评论中提到了工具{{link2：}},该工具为差异解析器和漂亮的HTML生成器{{link3：diff2html.xyz}}。

---

git diff格式的灵感来自于Unix命令diff -p。
（-p代表--show-c-function:显示每个更改所在的C函数）。

正如我在“git diff中的摘录段标题来自哪里？”中解释的那样，该功能（“显示每个C函数”）已经发展到考虑其他语言。

这类似于您在使用GitHub API比较两个提交时看到的JSON答案的patch字段。
该功能是2012年12月引入的。

只需使用相同的资源URL，并在“Accept”标题中发送application/vnd.github.diff或application/vnd.github.patch即可：

curl -H "Accept: application/vnd.github.diff" https://api.github.com/repos/pengwynn/dotfiles/commits/aee60a4cd56fb4c6a50e60f17096fc40c0d4d72c

结果：

结果：

diff --git a/tmux/tmux.conf.symlink b/tmux/tmux.conf.symlink
index 1f599cb..abaf625 100755
--- a/tmux/tmux.conf.symlink
+++ b/tmux/tmux.conf.symlink
@@ -111,6 +111,7 @@ set-option -g base-index 1
 ## enable mouse
 set-option -g mouse-select-pane on
 set-option -g mouse-select-window on
+set-option -g mouse-resize-pane on
 set-window-option -g mode-keys vi
 set-window-option -g mode-mouse on
 # set-window-option -g monitor-activity off

格式遵循经典的diff unified format（也可以在此处查看详细信息）。

您可以在cubicdaiya/node-dtl中查看示例（这是一个用于node.js的dtl(diff模板库)绑定）。

- VonC

---

是的，但是它的格式是什么，有没有办法在客户端JS中将其转换为HTML？ - Alexis Dumas

@ChristopherDumas 我不确定关于 HTML 的部分，但我已经在（现已编辑过的）答案中添加了格式。 - VonC

https://diff2html.xyz/ 是你想要的。 - Jaybeecave

@Jaybeecave 不错！我已经将你的评论包含在答案中，以增加可见性。 - VonC