Gitbook Introduction to comparing code block differences diff plugin

Gitbook plug-in that displays differences between codes in Markdown documents

English [1] [2] | Chinese

🏠 The home page^[3]

Github : https://snowdreams1006.github.io/gitbook-plugin-diff/^[4]
GitLab: https://snowdreams1006.gitlab.io/gitbook-plugin-diff/^[5]
Gitee : https://snowdreams1006.gitee.io/gitbook-plugin-diff/^[6]

Screen capture

usage

{% diff method="diffJson" %}



```json

{

  "name": "gitbook-plugin-simple-mind-map",

"Version" : "0.2.1",

  "description": "A gitBook plugin for generating and exporting mind map within markdown"

}

` ` `



```json

{

  "name": "gitbook-plugin-diff",

"Version" : "0.2.1",

  "description": "A gitbook plugin for showing the differences between the codes within markdown"

}

` ` `



{% enddiff %}

Copy the code

preview

{

- "description": "A gitBook plugin for generating and exporting mind map within markdown",

- "name": "gitbook-plugin-simple-mind-map",

+ "description": "A gitbook plugin for showing the differences between the codes within markdown",

+ "name": "gitbook-plugin-diff",

"Version" : "0.2.1"

}

Copy the code

usage

Step # 1- Update`book.json`file

In the book.json file of your Gitbook, add diff to the plugins list.

This is the simplest example:

{

    "plugins": ["diff"]

}

Copy the code

In addition, the following configuration options are supported:

"gitbook": {

    "properties": {

        "method": {

            "type": "string".

            "title": "jsdiff api method".

            "required": false.

            "default": "diffLines".

            "description": "some supported methods such as diffChars or diffWords or diffWordsWithSpace or diffLines or diffTrimmedLines or diffSentences or diffCss or diffJson or diffArrays"

        },

        "options": {

            "type": "object".

            "title": "jsdiff api options".

            "required": false.

            "description": "some methods may not support options"

        }

    }

}

Copy the code

Step # 2- Use`markdown`grammar

The diff plug-in supports options such as Method and options to generate differential code blocks.

This is the basic syntax used in markdown files:

{% diff %}

` ` `

old code

` ` `

` ` `

new code

` ` `

{% enddiff %}

Copy the code

Here are some basic examples:

`Diff.diffChars(oldStr, newStr[, options])`

Distinguish between two text blocks and compare them character by character.

return

Returns a list of changed objects (see below).

options

ignoreCase ： trueIgnore case differences. The default isfalse 。

The sample

usage

Set method=”diffChars” to call the diff.Diffchars (oldStr, newStr[, options]) method

{% diff method="diffChars" %}



```js

cat

` ` `



```js

cap

` ` `



{% enddiff %}

Copy the code

preview

  ca

- t

+ p

Copy the code

`Diff.diffWords(oldStr, newStr[, options])`

Distinguish between two blocks of text and compare them word by word, ignoring Spaces.

return

Returns a list of changed objects (see below).

options

ignoreCaseAnd:diffCharsThe same.

The sample

usage

Set method=”diffWords” to call the diffWords(oldStr, newStr[, options]) method

{% diff method="diffWords" %}



```bash

beep boop

` ` `



```bash

beep boob blah

` ` `



{% enddiff %}

Copy the code

preview

  beep

- boop

+ boob



+ blah

Copy the code

`Diff.diffWordsWithSpace(oldStr, newStr[, options])`

Distinguish between two blocks of text, compare them word for word, and treat whitespace as valid.

return

Returns a list of changed objects (see below).

options

ignoreCaseAnd:diffWordsThe same.

The sample

usage

Set method=”diffWordsWithSpace” to call the diff.DiffwordsWithspace (oldStr, newStr[, options]) method

{% diff method="diffWordsWithSpace" %}



```bash

beep boop

` ` `



```bash

beep boob blah

` ` `



{% enddiff %}

Copy the code

preview

  beep

- boop

+ boob blah

Copy the code

`Diff.diffLines(oldStr, newStr[, options])`

Compare two blocks of text, line by line.

return

Returns a list of changed objects (see below).

options

ignoreWhitespace ： trueIgnore leading and trailing whitespace. This has to do withdiffTrimmedLinesThe same
newlineIsToken ： true newlineIsTokenA newline character is treated as a separate tag. This allows changes to the newline structure to occur independently of the line content and be treated as such. Usually, this isdiffLinesMore human form, anddiffLinesBetter suited for patches and other computer-friendly output.

The sample

usage

Set method=”diffLines” to call the diff.Difflines (oldStr, newStr[, options]) method

{% diff method="diffLines",options={"newlineIsToken":true} %}



```bash

beep boop

the cat is palying with cap

what

` ` `



```bash

beep boob blah

the cat is palying with cap

who

` ` `



{% enddiff %}

Copy the code

preview

- beep boop



+ beep boob blah



  the cat is palying with cap



- what



+ who

Copy the code

`Diff.diffTrimmedLines(oldStr, newStr[, options])`

Distinguish between two blocks of text and compare them line by line, ignoring leading and trailing Spaces.

return

Returns a list of changed objects (see below).

options

ignoreWhitespaceAnd:diffLinesThe same.
newlineIsTokenWith:diffLines 。

The sample

usage

Set method=”diffTrimmedLines” to call the diff.DiffTrimmedlines (oldStr, newStr[, options]) method

{% diff method="diffTrimmedLines",options={"newlineIsToken":true} %}



```bash

beep boop

the cat is palying with cap

what

` ` `



```bash

beep boob blah

the cat is palying with cat

who

` ` `



{% enddiff %}

Copy the code

preview

- beep boop

  the cat is palying with cap

  what



+ beep boob blah

  the cat is palying with cat

  who

Copy the code

`Diff.diffSentences(oldStr, newStr[, options])`

Distinguish two blocks of text and compare them sentence by sentence.

return

Returns a list of changed objects (see below).

The sample

usage

Set method=”diffSentences” to call the Diff. DiffSentences (oldStr, newStr[, options]) method

{% diff method="diffSentences" %}



```bash

beep boop

the cat is palying with cap

what

` ` `



```bash

beep boob blah

the cat is palying with cat

who

` ` `



{% enddiff %}

Copy the code

preview

- beep boop

  the cat is palying with cap

  what



+ beep boob blah

  the cat is palying with cat

  who

Copy the code

`Diff.diffCss(oldStr, newStr[, options])`

Compare two blocks of text, compare CSS tags.

return

Returns a list of changed objects (see below).

The sample

usage

Set method=”diffCss” to call the diff.diffcss (oldStr, newStr[, options]) method

{% diff method="diffCss" %}



```css

.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section h5, .markdown-section h6 {

Margin - top: 1.275 em.

    margin-bottom: .85em;

    font-weight: 700;

}

` ` `



```css

.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section h5, .markdown-section h6 {

Margin - top: 1.5 em.

    margin-bottom: 1em;

}

` ` `



{% enddiff %}

Copy the code

preview

  .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section h5, .markdown-section h6 {

    margin-top:

1.275 em

+ 1.5 em

  ;

    margin-bottom:

- .85em

+ 1em

  ;

-

    font-weight: 700;



}

Copy the code

`Diff.diffJson(oldObj, newObj[, options])`

Compare two JSON objects, comparing the fields defined on each object. In this comparison, the order of the fields and so on is not important.

return

Returns a list of changed objects (see below).

The sample

usage

Set method=”diffJson” to call the diffJson(oldObj, newObj[, options]) method

{% diff method="diffJson" %}



```json

{

  "name": "gitbook-plugin-simple-mind-map",

"Version" : "0.2.1",

  "description": "A gitBook plugin for generating and exporting mind map within markdown"

}

` ` `



```json

{

  "name": "gitbook-plugin-diff",

"Version" : "0.2.1",

  "description": "A gitbook plugin for showing the differences between the codes within markdown"

}

` ` `



{% enddiff %}

Copy the code

preview

{

- "description": "A gitBook plugin for generating and exporting mind map within markdown",

- "name": "gitbook-plugin-simple-mind-map",

+ "description": "A gitbook plugin for showing the differences between the codes within markdown",

+ "name": "gitbook-plugin-diff",

"Version" : "0.2.1"

}

Copy the code

`Diff.diffArrays(oldArr, newArr[, options])`

Compare two arrays to see if each item is exactly equal (===).

return

Returns a list of changed objects (see below).

Option to

comparator: used for custom equality checkingfunction(left, right)

The sample

usage

Set method=”diffArrays” to call the diff.DiffArrays (oldArr, newArr[, options]) method

{% diff method="diffArrays" %}



```json

[

    "Vue",

    "Python",

    "Java",

    "flutter",

    "springboot",

    "docker",

    "React",

"Applets"

]

` ` `



```json

[

    "Vuejs",

    "Nodejs",

    "Java",

    "flutter",

    "springboot",

    "docker",

    "React"

]

` ` `



{% enddiff %}

Copy the code

preview

[

- Vue

- Python

+ Vuejs

+ Nodejs

    Java

    flutter

    springboot

    docker

    React

A small program that -

]

Copy the code

Step # 3- Run`gitbook`The command

rungitbook install.It will automatically be yoursgitbookThe installationdiffThe plug-in.

You need to allow this step only once.

gitbook install

Copy the code

Alternatively, you can install the gitbook-plugin-diff plug-in locally by running the NPM install gitbook-plugin-diff command.

npm install gitbook-plugin-diff

Copy the code

Build your book as usual (gitbook build) or services (gitbook serve).

gitbook serve

Copy the code

The sample

Official document configuration file

https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json^[7]

{

    "plugins": ["diff"].

    "pluginsConfig": {

        "diff": {

            "method": "diffJson"

        }

    }

}

Copy the code

Official sample configuration file

https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json^[8]

{

    "plugins": ["diff"].

    "pluginsConfig": {

        "diff": {

            "method": "diffJson"

        }

    }

}

Copy the code

The samplebook.jsonfile

{

    "plugins": ["diff"]

}

Copy the code

Or you can set method as the default method for comparing code to code:

{

    "plugins": ["diff"].

    "pluginsConfig": {

        "diff": {

            "method": "diffChars"

        }

    }

}

Copy the code

Alternatively, you can set options as the default, depending on the method.

{

    "plugins": ["diff"].

    "pluginsConfig": {

        "diff": {

            "method": "diffChars".

            "options": {

              "ignoreCase": true

            }

        }

    }

}

Copy the code

Note: If your book has not yet been created, the code snippet above can be used as a complete book.json file.

Thank you

A javascript text differencing implementation. : https://github.com/kpdecker/jsdiff^[9]
get colors in your node.js console : https://github.com/Marak/colors.js^[10]
GitBook CodeGroup Plugin : https://github.com/lwhiteley/gitbook-plugin-codegroup^[11]

The author

👤 snowdreams1006

Website: snowdreams1006. Tech [12]
GitHub : @snowdreams1006^[13]
Email: [email protected][14]

contribution

Contributions, questions and feature requests are welcome! Check the problem page at any time [15].

support

If this project has helped you, please give a star [16]!

copyright

The project is licensed by MIT[18].

The resources

[1]

English: https://snowdreams1006.github.io/gitbook-plugin-diff/en/

[2]

English: https://snowdreams1006.github.io/gitbook-plugin-diff/zh/

[3]

Home page: https://github.com/snowdreams1006/gitbook-plugin-diff#readme

[4]

https://snowdreams1006.github.io/gitbook-plugin-diff/: https://snowdreams1006.github.io/gitbook-plugin-diff/

[5]

https://snowdreams1006.gitlab.io/gitbook-plugin-diff/: https://snowdreams1006.gitlab.io/gitbook-plugin-diff/

[6]

https://snowdreams1006.gitee.io/gitbook-plugin-diff/: https://snowdreams1006.gitee.io/gitbook-plugin-diff/

[7]

https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json: https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json

[8]

https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json: https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json

[9]

https://github.com/kpdecker/jsdiff: https://github.com/kpdecker/jsdiff

[10]

https://github.com/Marak/colors.js: https://github.com/Marak/colors.js

[11]

https://github.com/lwhiteley/gitbook-plugin-codegroup: https://github.com/lwhiteley/gitbook-plugin-codegroup

[12]

snowdreams1006.tech: https://snowdreams1006.tech/

[13]

@snowdreams1006: https://github.com/snowdreams1006

[14]

[email protected]: mailto:[email protected]

[15]

Question page: https://github.com/snowdreams1006/gitbook-plugin-diff/issues

[16]

The stars: https://github.com/snowdreams1006/gitbook-plugin-diff

[17]

snowdreams1006: https://github.com/snowdreams1006

[18]

MIT: https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/LICENSE

Gitbook Introduction to comparing code block differences diff plugin

🏠 The home page[3]

Screen capture

usage

Step # 1- Updatebook.jsonfile

Step # 2- Usemarkdowngrammar

Diff.diffChars(oldStr, newStr[, options])

Diff.diffWords(oldStr, newStr[, options])

Diff.diffWordsWithSpace(oldStr, newStr[, options])

Diff.diffLines(oldStr, newStr[, options])

Diff.diffTrimmedLines(oldStr, newStr[, options])

Diff.diffSentences(oldStr, newStr[, options])

Diff.diffCss(oldStr, newStr[, options])

Diff.diffJson(oldObj, newObj[, options])

Diff.diffArrays(oldArr, newArr[, options])

Step # 3- RungitbookThe command

The sample

Thank you

The author

contribution

support

copyright

The resources

Related Posts

Learn React (as an Angular developer)

Do you know the difference between relative and non-relative module imports in TS?

At the beginning of LogicFlow overhand

🏠 The home page^[3]

Step # 1- Update`book.json`file

Step # 2- Use`markdown`grammar

`Diff.diffChars(oldStr, newStr[, options])`

`Diff.diffWords(oldStr, newStr[, options])`

`Diff.diffWordsWithSpace(oldStr, newStr[, options])`

`Diff.diffLines(oldStr, newStr[, options])`

`Diff.diffTrimmedLines(oldStr, newStr[, options])`

`Diff.diffSentences(oldStr, newStr[, options])`

`Diff.diffCss(oldStr, newStr[, options])`

`Diff.diffJson(oldObj, newObj[, options])`

`Diff.diffArrays(oldArr, newArr[, options])`

Step # 3- Run`gitbook`The command