gitbook 入門教程之比較代碼塊差別 diff 插件

在 markdown 文檔中顯示代碼之間的差別的 Gitbook 插件

English | 中文

🏠 主頁

• Github : https://snowdreams1006.github.io/gitbook-plugin-diff/
• GitLab: https://snowdreams1006.gitlab.io/gitbook-plugin-diff/
• Gitee : https://snowdreams1006.gitee.io/gitbook-plugin-diff/

屏幕截圖

• 用法

{% diff method="diffJson" %}

{
"name": "gitbook-plugin-simple-mind-map",
"version": "0.2.1",
"description": "A gitBook plugin for generating and exporting mind map within markdown"
}

{
"name": "gitbook-plugin-diff",
"version": "0.2.1",
"description": "A gitbook plugin for showing the differences between the codes within markdown"
}

{% enddiff %}

• 預覽

{
-   "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"
}

用法

步驟＃1-更新 book.json 文件

在您的 gitbook 的 book.json 文件中,將 diff 添加到 plugins 列表中.

這是最簡單的示例:

{
    "plugins": ["diff"]
}

此外,受支持的配置選項以下:

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

步驟＃2- 使用 markdown 語法

diff 插件支持 method 和 options 等選項生成差別代碼塊.

這是在 markdown 文件中基本使用語法:

{% diff %}

old code

new code

{% enddiff %}

下面有一些基本示例:

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

區分兩個文本塊，逐個字符比較。

返回

返回更改對象列表（請參見下文）。

選項

• ignoreCase ： true忽略大小寫差別。默認爲false 。

示例

• 用法

設置 method="diffChars"以調用 Diff.diffChars(oldStr, newStr[, options])方法

{% diff method="diffChars" %}

cat

cap

{% enddiff %}

• 預覽

ca
- t
+ p

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

區分兩個文本塊，逐字比較，忽略空格。

返回

返回更改對象列表（請參見下文）。

選項

• ignoreCase ：與diffChars相同。

示例

• 用法

設置 method="diffWords"來調用 Diff.diffWords(oldStr, newStr[, options])方法

{% diff method="diffWords" %}

beep boop

beep boob blah

{% enddiff %}

• 預覽

beep
- boop
+ boob

+ blah

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

區分兩個文本塊，逐字比較，將空白視爲有效。

返回

返回更改對象列表（請參見下文）。

選項

• ignoreCase ：與diffWords相同。

示例

• 用法

設置 method="diffWordsWithSpace"以調用 Diff.diffWordsWithSpace(oldStr, newStr[, options])方法

{% diff method="diffWordsWithSpace" %}

beep boop

beep boob blah

{% enddiff %}

• 預覽

beep
- boop
+ boob blah

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

比較兩個文本塊，逐行比較。

返回

返回更改對象列表（請參見下文）。

選項

• ignoreWhitespace ： true忽略前導和尾隨空白。這與diffTrimmedLines相同
• newlineIsToken ： true newlineIsToken換行符視爲單獨的標記。這容許換行結構的更改獨立於行內容而發生，並照此處理。一般，這是diffLines更加人性化的形式，而且diffLines更適合於補丁和其餘計算機友好的輸出。

示例

• 用法

設置 method="diffLines"以調用 Diff.diffLines(oldStr, newStr[, options])方法

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

beep boop
the cat is palying with cap
what

beep boob blah
the cat is palying with cap
who

{% enddiff %}

• 預覽

- beep boop

+ beep boob blah

  the cat is palying with cap

- what

+ who

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

區分兩個文本塊，逐行比較，忽略前導和尾隨空格。

返回

返回更改對象列表（請參見下文）。

選項

• ignoreWhitespace ：與diffLines相同。
• newlineIsToken ：同diffLines 。

示例

• 用法

設置 method="diffTrimmedLines"來調用 Diff.diffTrimmedLines(oldStr, newStr[, options])方法

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

beep boop
the cat is palying with cap
what

beep boob blah
the cat is palying with cat
who

{% enddiff %}

• 預覽

- beep boop
  the cat is palying with cap
  what

+ beep boob blah
  the cat is palying with cat
  who

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

區分兩個文本塊，逐句比較。

返回

返回更改對象列表（請參見下文）。

示例

• 用法

設置 method="diffSentences"來調用 Diff.diffSentences(oldStr, newStr[, options])方法

{% diff method="diffSentences" %}

beep boop
the cat is palying with cap
what

beep boob blah
the cat is palying with cat
who

{% enddiff %}

• 預覽

- beep boop
  the cat is palying with cap
  what

+ beep boob blah
  the cat is palying with cat
  who

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

比較兩個文本塊，比較 CSS 標記。

返回

返回更改對象列表（請參見下文）。

示例

• 用法

設置 method="diffCss"來調用 Diff.diffCss(oldStr, newStr[, options])方法

{% diff method="diffCss" %}

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

margin-top: 1.275em;
margin-bottom: .85em;
font-weight: 700;

}

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

margin-top: 1.5em;
margin-bottom: 1em;

}

{% enddiff %}

• 預覽

.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section h5, .markdown-section h6 {
    margin-top:
- 1.275em
+ 1.5em
  ;
    margin-bottom:
- .85em
+ 1em
  ;
-
    font-weight: 700;

}

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

比較兩個 JSON 對象，比較每一個對象上定義的字段。在此比較中，字段的順序等並不重要。

返回

返回更改對象列表（請參見下文）。

示例

• 用法

設置 method="diffJson"來調用 Diff.diffJson(oldObj, newObj[, options])方法

{% diff method="diffJson" %}

{
"name": "gitbook-plugin-simple-mind-map",
"version": "0.2.1",
"description": "A gitBook plugin for generating and exporting mind map within markdown"
}

{
"name": "gitbook-plugin-diff",
"version": "0.2.1",
"description": "A gitbook plugin for showing the differences between the codes within markdown"
}

{% enddiff %}

• 預覽

{
-   "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"
}

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

比較兩個數組，比較每一個項目是否嚴格相等（===）。

返回

返回更改對象列表（請參見下文）。

選件

• comparator ：用於自定義相等性檢查的function(left, right)

示例

• 用法

設置 method="diffArrays"以調用 Diff.diffArrays(oldArr, newArr[, options])方法

{% diff method="diffArrays" %}

[

"Vue",
"Python",
"Java",
"flutter",
"springboot",
"docker",
"React",
"小程序"

]

[

"Vuejs",
"Nodejs",
"Java",
"flutter",
"springboot",
"docker",
"React"

]

{% enddiff %}

• 預覽

[
-   Vue
-   Python
+   Vuejs
+   Nodejs
    Java
    flutter
    springboot
    docker
    React
-   小程序
]

步驟＃3- 運行 gitbook 命令

1. 運行 gitbook install .它將自動爲您的 gitbook 安裝 diff 插件.

該步驟僅須要容許一次便可.

gitbook install

或者您能夠運行 npm install gitbook-plugin-diff 命令本地安裝 gitbook-plugin-diff 插件.

npm install gitbook-plugin-diff

1. 像往常同樣構建您的書（ gitbook build ）或服務（ gitbook serve ）.

gitbook serve

示例

• 官方文檔配置文件

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

{
    "plugins": ["diff"],
    "pluginsConfig": {
        "diff": {
            "method": "diffJson"
        }
    }
}

• 官方示例配置文件

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

{
    "plugins": ["diff"],
    "pluginsConfig": {
        "diff": {
            "method": "diffJson"
        }
    }
}

• 示例book.json文件

{
    "plugins": ["diff"]
}

或者您能夠將 method 設置爲默認方法用於代碼之間進行比較方式：

{
    "plugins": ["diff"],
    "pluginsConfig": {
        "diff": {
            "method": "diffChars"
        }
    }
}

或者您能夠根據方法將 options 設置爲默認選項.

{
    "plugins": ["diff"],
    "pluginsConfig": {
        "diff": {
            "method": "diffChars",
            "options": {
              "ignoreCase": true
            }
        }
    }
}

注意 ：若是您的書尚未建立,以上代碼段能夠用做完整的 book.json 文件.

致謝

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

做者

👤 snowdreams1006

• 網站 : snowdreams1006.tech
• GitHub : @snowdreams1006
• 電子郵件 : snowdreams1006@163.com

貢獻

歡迎貢獻，問題和功能要求！隨時檢查問題頁面 。

支持

若是這個項目對您有幫助，請給個星星 ！

版權

版權全部 ©2019 snowdreams1006 。

該項目是MIT許可的。

若是本文對你有所幫助,不用讚揚,也沒必要轉發,直接點贊留言告訴鼓勵一下就能夠啦!