code diff by react hook
npm install react-code-diff-lite一个基于 diff2html 的 React diff 组件
安装
``code`
npm install react-code-diff-lite
引入
`tsx
import React from "react";
import CodeDiff from "react-code-diff-lite";
const newStr = {
a: 1,
b: 2,
c: () => {
return this.a
}
};
const oldStr = {
a: 1,
b: 2,
getValue: () => {
return this.b
}
};
const Main: React.FC = () => { 修改
return (
删除
添加
新增
编辑
删除
$3
-
oldStr: 旧代码
- newStr: 新代码
- context: 代码对比范围,默认为 0 也就是只显示改动的地方,如果为 10 就是除改动地方之外多显示上下 10 行代码
- outputFormat: 展示方式行内对比和两个窗口对比 'line-by-line' | 'side-by-side'
- theme`: 主题色 支持自动跟随系统色的方式 'auto', 或者手动设置 'light' | 'dark', 默认'auto'#### line-by-line 行内对比

#### 两个窗口对比
side-by-side

#### 夜间模式效果
