# code-diff-html
> 开箱即用的代码对比工具
Latest version **2.1.0** (published 2023-03-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install code-diff-html
pnpm add code-diff-html
yarn add code-diff-html
bun add code-diff-html
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.0 |
| Published | 2023-03-03 |
| First published | 2022-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | ouqin |
| Maintainers | ouqin_live |
| Keywords | diff, code-diff, gitlab-diff, diff2html, jsdiff, json, side-by-side, code-diff-html |
## Links
- npm: https://www.npmjs.com/package/code-diff-html
- Repository: https://github.com/1350097693/code-diff-html
- Homepage: https://github.com/1350097693/code-diff-html#readme
- Issues: https://github.com/1350097693/code-diff-html/issues
- npm.io page: https://npm.io/package/code-diff-html
## Dependencies (2)
- [diff](https://npm.io/package/diff.md) ^5.0.0
- [diff2html](https://npm.io/package/diff2html.md) ^3.4.16
## Alternatives
- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads
## Recent versions
- 2.1.0 (latest) — 2023-03-03
- 1.1.0 — 2022-03-10
- 1.0.8 — 2022-03-10
- 1.0.7 — 2022-03-09
- 1.0.6 — 2022-03-09
- 1.0.5 — 2022-03-08
- 1.0.4 — 2022-03-08
- 1.0.3 — 2022-03-08
- 1.0.2 — 2022-03-08
- 1.0.1 — 2022-03-08
- 1.0.0 — 2022-03-08
## README
# code-diff-html
> 一个类似gitlab的代码对比（diff）工具
> 一个基于diff.js和diff2html封装的库，简化了使用
## 下载
```
npm i code-diff-html --save
```
## 使用
1.引入drawDiff方法
```
import { drawDiff } from 'code-diff-html'
```
2.定义一个dom元素
```
```
3.执行drawDiff方法
```
drawDiff({
fileName:'人物对比',
oldObj:a,
newObj:b,
domId:'myDiffElement',
options:{}
})
```
## 完整例子
```
import React from "react";
import { drawDiff } from 'code-diff-html'
const a = {
"id": 1,
"name":'小明',
"age":18,
"sex":'男'
}
const b = {
"id": 2,
"name":'小刚',
"age":24,
"sex":'男'
}
export default class APP extends React.Component {
componentDidMount(){
drawDiff({
fileName:'人物对比',
oldObj:a,
newObj:b,
domId:'myDiffElement',
options:{
outputFormat:"side-by-side"
}
})
}
render() {
return (
<>
);
}
}
```
## 效果
## drawDiff方法简述
| 参数 | 类型 | 说明 | 是否必须 |
| -------- | ------ | ------------------- | -------- |
| fileName | string | 文件名 | 否 |
| oldObj | object | 旧数据对象 | 是 |
| newObj | object | 新数据对象 | 是 |
| domId | string | 内容承载的dom节点id | 是 |
| options | object | 展现框的配置项 | 否 |
| context | number | 只显示差异项前后多少行的数据，其余折叠，不填则显示全文 | 否 |
## options简述
The HTML output accepts a Javascript object with configuration. Possible options:
- `outputFormat`: the format of the output data: `'line-by-line'` or `'side-by-side'`, default is `'line-by-line'`
- `drawFileList`: show a file list before the diff: `true` or `false`, default is `true`
- `srcPrefix`: add a prefix to all source (before changes) filepaths, default is `''`. Should match the prefix used when [generating the diff](https://git-scm.com/docs/git-diff#Documentation/git-diff.txt---src-prefixltprefixgt).
- `dstPrefix`: add a prefix to all destination (after changes) filepaths, default is `''`. Should match the prefix used when [generating the diff](https://git-scm.com/docs/git-diff#Documentation/git-diff.txt---dst-prefixltprefixgt)
- `diffMaxChanges`: number of changed lines after which a file diff is deemed as too big and not displayed, default is `undefined`
- `diffMaxLineLength`: number of characters in a diff line after which a file diff is deemed as too big and not displayed, default is `undefined`
- `diffTooBigMessage`: function allowing to customize the message in case of file diff too big (if `diffMaxChanges` or `diffMaxLineLength` is set). Will be given a file index as a number and should return a string.
- `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default is `none`
- `matchWordsThreshold`: similarity threshold for word matching, default is `0.25`
- `maxLineLengthHighlight`: only perform diff changes highlight if lines are smaller than this, default is `10000`
- `diffStyle`: show differences level in each line: `'word'` or `'char'`, default is `'word'`
- `renderNothingWhenEmpty`: render nothing if the diff shows no change in its comparison: `true` or `false`, default is `false`
- `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is `2500`
- `maxLineSizeInBlockForComparison`: maximum number os characters of the bigger line in a block to apply comparison, default is `200`
- `compiledTemplates`: object ([Hogan.js](https://github.com/twitter/hogan.js/) template values) with previously compiled templates to replace parts of the html, default is `{}`. For example: `{ "tag-file-changed": Hogan.compile("MODIFIED") }`
- ```
rawTemplates
```
: object (string values) with raw not compiled templates to replace parts of the html, default is
```
{}
```
. For example:
```
{ "tag-file-changed": "MODIFIED" }
```
> For more information regarding the possible templates look into [src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)
---
_Source: https://npm.io/package/code-diff-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._