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 (
<>


);
}
}

`




效果

!diff对比

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.

- dstPrefix: add a prefix to all destination (after changes) filepaths, default is ''. Should match the prefix used when generating the diff

- 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 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