GitHub 的代码对比为什么这么好看？这个开源库可以帮你搞定！

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI实践者。

• • 个人网站：https://yaolifeng.com 也同步更新。
• • 转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI、出海、个人思考等内容。

如果本文对你有帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

今天分享一个代码对比渲染库，叫Diffs。

如果你在做代码审查工具、编辑器插件、文档网站这类项目，需要展示代码差异，这个库能帮上忙。

它是Pierre团队开源的，专门用来在网页上渲染代码和代码差异。

官网：https://diffs.com/

这个库是干啥的

Diffs说白了就是一个专门渲染代码对比的JavaScript库。

你给它两个版本的代码文件，或者一个patch文件，它能给你渲染出漂亮的代码差异视图。

语法高亮用的是Shiki，主题和语言支持都很全。

而且它的架构设计很有意思，底层全是生成纯HTML字符串，然后用Shadow DOM和CSS Grid布局渲染，性能特别好。

核心功能有哪些

多种渲染方式

它提供了两种方式来渲染代码差异。

一种是直接给两个版本的文件内容，它自动帮你计算差异。

另一种是直接喂给它一个patch文件，比如从git或者GitHub API拿到的patch。

灵活度很高，适应不同的使用场景。

支持多个框架

原生JavaScript和React都有现成的组件。

如果你用的是其他框架，底层的渲染器也暴露出来了，可以自己包装。

他们说如果有需求也会继续添加其他框架的支持。

性能优化

默认语法高亮跑在主线程，但如果你要渲染大文件或者很多diff，可能会卡。

他们提供了Worker Pool的方案，把语法高亮丢到后台线程去处理。

主线程先渲染纯文本，等Worker返回结果再应用高亮，不会阻塞UI。

SSR支持

服务端渲染也考虑到了。

你可以在服务端预渲染好带语法高亮的HTML，然后在客户端水合，直接获得完整的交互能力。

这对需要SEO或者首屏性能的项目特别有用。

组件和API

React API

如果你用React，有这几个组件可以直接用。

MultiFileDiff用来对比两个文件版本，PatchDiff用来渲染patch字符串，FileDiff用来渲染预解析的差异数据，File用来渲染单个代码文件不带差异。

所有组件都有统一的Props接口，学习成本低。

原生JavaScript API

不用React的话，原生JS也有对应的类。

FileDiff和File两个核心组件，用法跟React版本类似，只是API形式不一样。

它们会处理所有复杂的语法高亮、主题、交互逻辑。

底层渲染器

如果你想做更定制化的东西，底层的渲染器也暴露出来了。

DiffHunksRenderer负责把差异数据渲染成HAST节点，FileRenderer负责把单个文件渲染成带语法高亮的代码。

这些是给高级用户用的，大部分场景用上层组件就够了。

实用的工具函数

parseDiffFromFile

传两个文件版本进去，它帮你生成差异数据。

这个函数返回的数据结构可以直接喂给FileDiff组件。

parsePatchFiles

解析patch文件内容成结构化数据。

支持单个patch也支持多提交的patch文件，比如GitHub PR的那种.patch文件。

diffAcceptRejectHunk

程序化地接受或拒绝某个差异块。

这个功能特别适合做代码审查工具或者AI辅助编码工具，用户可以选择性地应用某些改动。

preloadHighlighter

提前加载特定的主题和语言，确保渲染的时候没有异步加载延迟。

对用户体验有要求的话，可以用这个预加载常用的语言。

SSR预渲染

服务端渲染的话，他们提供了一套预渲染API。

preloadFile

预渲染单个文件带语法高亮，不带差异。

返回的对象可以直接spread到File组件里，客户端会自动水合。

preloadMultiFileDiff

直接从旧文件和新文件内容预渲染差异。

这是最简单的方式，如果你有原始文件内容的话。

preloadPatchDiff

从patch字符串预渲染单个文件的差异。

preloadPatchFile

从多文件patch字符串预渲染多个差异，返回的是数组，每个元素对应一个文件。

所有这些预渲染函数返回的对象都包含原始输入加上prerenderedHTML，直接spread到对应的React组件就行。

自定义样式

组件用Shadow DOM渲染，样式隔离得很好，不会跟你页面的CSS冲突。

但这也意味着如果要改样式，得用CSS变量。

他们提供了一堆CSS变量可以覆盖默认样式。

如果你需要更高级的定制，还有个unsafeCSS选项，可以直接往Shadow DOM里注入任意CSS。

不过他们说这个功能不保证向后兼容，慎用。建议先跟他们沟通看能不能有更永久的方案。

适合什么场景

如果你在做这些类型的项目，Diffs会很有用。

代码审查平台、在线代码编辑器、技术文档网站、Git可视化工具、AI编程辅助工具，这些场景都需要展示代码差异。

它的API设计得挺友好的，上手快，而且性能不错。

语法高亮基于Shiki，主题和语言支持特别全，基本主流语言都覆盖了。

安装和开始使用

它发布在npm上，装起来很简单。

npm install @pierre/diffs

包提供了几个入口点，按需引入就行。

@pierre/diffs是原生JS组件和工具函数，@pierre/diffs/react是React组件，@pierre/diffs/ssr是服务端渲染工具，@pierre/diffs/worker是Worker Pool相关的。

文档写得挺详细的，每个API都有代码示例，可以去官网查看完整文档：https://diffs.com/docs

如果你需要在网页上展示代码对比，又不想自己从头实现语法高亮和差异算法，可以试试这个库。

开源免费，性能好，API设计合理，还在持续开发中。