diffs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

@pierre/diffs

@pierre/diffs

Use

@pierre/diffs

to render syntax-highlighted files and diffs. Use its optional editor, SSR, and worker entries for those capabilities.

使用

@pierre/diffs

渲染带语法高亮的文件和差异对比内容。可使用其可选的编辑器、SSR和worker入口来实现对应功能。

bash

pnpm add @pierre/diffs

Install

react

and

react-dom

when the app uses the React entry.

bash

pnpm add @pierre/diffs

如果应用使用React入口，请安装

react

和

react-dom

。

Surface	Reference
Root components, parsing, and file extension APIs	Core API
Languages, themes, highlighter state, and streams	Highlighting API
Renderers, managers, DOM helpers, comparisons, and constants	Low-level rendering API
Shared data, option, render, selection, and editor types	Shared types
`@pierre/diffs/react`	React API
`@pierre/diffs/edit`	Editor API
`@pierre/diffs/ssr`	SSR API
`@pierre/diffs/worker` and worker scripts	Worker API

功能模块	参考文档
根组件、解析和文件扩展API	核心API
语言、主题、高亮器状态和流	高亮API
渲染器、管理器、DOM辅助工具、对比功能和常量	底层渲染API
共享数据、选项、渲染、选择和编辑器类型	共享类型
`@pierre/diffs/react`	React API
`@pierre/diffs/edit`	编辑器API
`@pierre/diffs/ssr`	SSR API
`@pierre/diffs/worker` 和 worker 脚本	Worker API

Task	Recipe
Render a file or diff in React	Render with React
Render a file or diff without React	Render with vanilla JavaScript
Build a virtualized review surface	Use CodeView
Edit a React surface or CodeView	Edit with React
Edit a vanilla surface or CodeView	Edit with vanilla JavaScript
Preload markup on the server	Use SSR
Highlight through a worker pool	Use workers
Add line annotations and selection	Add annotations and selection
Register a Shiki language or theme	Register custom highlighting