update(2024-08-14): 后来发现已经有非常成熟的库了 @monaco-editor/react

推广一下自己写的项目~欢迎共建

react-code-differ

本组件可用于代码差异的查看, 由于是 react 编写的，仅支持 react 版本

组件文档地址

先支持两种使用方式：

1. 本地文件引入
2. github 线上 diff 地址引入

安装

npm i react-code-differ

本地文件引入

import { CodeDiff } from "react-code-differ";
import diffText from './diffText'

export const MyComponent = (args) => {
  return (
    <CodeDiff type={"local"} path={diffText} />
  );
};

github 线上 diff 地址引入

import { CodeDiff } from "react-code-differ";

export const MyComponent = (args) => {
  const path = "https://api.github.com/repos/rtfpessoa/diff2html/pulls/106"
  return (
    <CodeDiff type={"github"} path={path} />
  );
};

项目地址：github.com/suedar/reac…