在 markdown 文檔中顯示代碼之間的差異的 Gitbook 插件
English[1] | 中文[2]
主頁[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]
屏幕截圖
- 用法
<code>{% 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 %}/<code>- 預覽
用法
步驟＃1-更新 book.json 文件
在您的 gitbook 的 book.json 文件中,將 diff 添加到 plugins 列表中.
這是最簡單的示例:
<code>{
"plugins": ["diff"]
}/<code>此外,受支持的配置選項如下:
<code>"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"
}
}
}/<code>步驟＃2- 使用 markdown 語法
diff 插件支持 method 和 options 等選項生成差異代碼塊.
這是在 markdown 文件中基本使用語法:
<code>{% diff %}
```
old code
```
```
new code
```
{% enddiff %}/<code>下面有一些基本示例:
Diff.diffChars(oldStr, newStr[, options])
區分兩個文本塊，逐個字符比較。
返回
返回更改對象列表（請參見下文）。
選項
- ignoreCase ： true忽略大小寫差異。默認為false 。
示例
- 用法
設置method="diffChars"以調用Diff.diffChars(oldStr, newStr[, options])方法
<code>{% diff method="diffChars" %}
```js
cat
```
```js
cap
```
{% enddiff %}/<code>- 預覽
<code> ca
- t
+ p/<code>
Diff.diffWords(oldStr, newStr[, options])
區分兩個文本塊，逐字比較，忽略空格。
返回
返回更改對象列表（請參見下文）。
選項
- ignoreCase ：與diffChars相同。
示例
- 用法
設置method="diffWords"來調用Diff.diffWords(oldStr, newStr[, options])方法
<code>{% diff method="diffWords" %}
```bash
beep boop
```
```bash
beep boob blah
```
{% enddiff %}/<code>- 預覽
<code> beep
- boop
+ boob
+ blah/<code>
Diff.diffWordsWithSpace(oldStr, newStr[, options])
區分兩個文本塊，逐字比較，將空白視為有效。
返回
返回更改對象列表（請參見下文）。
選項
- ignoreCase ：與diffWords相同。
示例
- 用法
設置method="diffWordsWithSpace"以調用Diff.diffWordsWithSpace(oldStr, newStr[, options])方法
<code>{% diff method="diffWordsWithSpace" %}
```bash
beep boop
```
```bash
beep boob blah
```
{% enddiff %}/<code>- 預覽
<code> beep
- boop
+ boob blah/<code>
Diff.diffLines(oldStr, newStr[, options])
比較兩個文本塊，逐行比較。
返回
返回更改對象列表（請參見下文）。
選項
- ignoreWhitespace ： true忽略前導和尾隨空白。這與diffTrimmedLines相同
- newlineIsToken ： true newlineIsToken換行符視為單獨的標記。這允許換行結構的更改獨立於行內容而發生，並照此處理。通常，這是diffLines更加人性化的形式，並且diffLines更適合於補丁和其他計算機友好的輸出。
示例
- 用法
設置method="diffLines"以調用Diff.diffLines(oldStr, newStr[, options])方法
<code>{% 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 %}/<code>- 預覽
<code>- beep boop
+ beep boob blah
the cat is palying with cap
- what
+ who/<code>
Diff.diffTrimmedLines(oldStr, newStr[, options])
區分兩個文本塊，逐行比較，忽略前導和尾隨空格。
返回
返回更改對象列表（請參見下文）。
選項
- ignoreWhitespace ：與diffLines相同。
- newlineIsToken ：同diffLines 。
示例
- 用法
設置method="diffTrimmedLines"來調用Diff.diffTrimmedLines(oldStr, newStr[, options])方法
<code>{% 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 %}/<code>- 預覽
<code>- beep boop
the cat is palying with cap
what
+ beep boob blah
the cat is palying with cat
who/<code>
Diff.diffSentences(oldStr, newStr[, options])
區分兩個文本塊，逐句比較。
返回
返回更改對象列表（請參見下文）。
示例
- 用法
設置method="diffSentences"來調用Diff.diffSentences(oldStr, newStr[, options])方法
<code>{% 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 %}/<code>- 預覽
<code>- beep boop
the cat is palying with cap
what
+ beep boob blah
the cat is palying with cat
who/<code>
Diff.diffCss(oldStr, newStr[, options])
比較兩個文本塊，比較 CSS 標記。
返回
返回更改對象列表（請參見下文）。
示例
- 用法
設置method="diffCss"來調用Diff.diffCss(oldStr, newStr[, options])方法
<code>{% 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.275em;
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.5em;
margin-bottom: 1em;
}
```
{% enddiff %}/<code>- 預覽
<code> .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;
}/<code> Diff.diffJson(oldObj, newObj[, options])
比較兩個 JSON 對象，比較每個對象上定義的字段。在此比較中，字段的順序等並不重要。
返回
返回更改對象列表（請參見下文）。
示例
- 用法
設置method="diffJson"來調用Diff.diffJson(oldObj, newObj[, options])方法
<code>{% 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 %}/<code>- 預覽
<code>{
- "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"
}/<code>Diff.diffArrays(oldArr, newArr[, options])
比較兩個數組，比較每個項目是否嚴格相等（===）。
返回
返回更改對象列表（請參見下文）。
選件
- comparator ：用於自定義相等性檢查的function(left, right)
示例
- 用法
設置method="diffArrays"以調用Diff.diffArrays(oldArr, newArr[, options])方法
<code>{% diff method="diffArrays" %}
```json
[
"Vue",
"Python",
"Java",
"flutter",
"springboot",
"docker",
"React",
"小程序"
]
```
```json
[
"Vuejs",
"Nodejs",
"Java",
"flutter",
"springboot",
"docker",
"React"
]
```
{% enddiff %}/<code>- 預覽
<code>[
- Vue
- Python
+ Vuejs
+ Nodejs
Java
flutter
springboot
docker
React
- 小程序
]/<code>
步驟＃3- 運行 gitbook 命令
- 運行 gitbook install .它將自動為您的 gitbook 安裝 diff 插件.
該步驟僅需要允許一次即可.
<code>gitbook install/<code>
或者您可以運行 npm install gitbook-plugin-diff 命令本地安裝 gitbook-plugin-diff 插件.
<code>npm install gitbook-plugin-diff/<code>
- 像往常一樣構建您的書（ gitbook build ）或服務（ gitbook serve ）.
<code>gitbook serve/<code>
示例
- 官方文檔配置文件
https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/docs/book.json[7]
<code>{
"plugins": ["diff"],
"pluginsConfig": {
"diff": {
"method": "diffJson"
}
}
}/<code>- 官方示例配置文件
https://github.com/snowdreams1006/gitbook-plugin-diff/blob/master/example/book.json[8]
<code>{
"plugins": ["diff"],
"pluginsConfig": {
"diff": {
"method": "diffJson"
}
}
}/<code>- 示例book.json文件
<code>{
"plugins": ["diff"]
}/<code>或者您可以將 method 設置為默認方法用於代碼之間進行比較方式：
<code>{
"plugins": ["diff"],
"pluginsConfig": {
"diff": {
"method": "diffChars"
}
}
}/<code>或者您可以根據方法將 options 設置為默認選項.
<code>{
"plugins": ["diff"],
"pluginsConfig": {
"diff": {
"method": "diffChars",
"options": {
"ignoreCase": true
}
}
}
}/<code>注意 ：如果您的書還沒有創建,以上代碼段可以用作完整的 book.json 文件.
致謝
- 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]
作者
snowdreams1006
- 網站 : snowdreams1006.tech[12]
- GitHub : @snowdreams1006[13]
- 電子郵件 : [email protected][14]
貢獻
歡迎貢獻，問題和功能要求！隨時檢查問題頁面[15] 。
支持
如果這個項目對您有幫助，請給個星星[16] ！
版權所有 ©2019 snowdreams1006[17] 。
該項目是MIT[18]許可的。
<code>[1]
English: https://snowdreams1006.github.io/gitbook-plugin-diff/en/
[2]
中文: https://snowdreams1006.github.io/gitbook-plugin-diff/zh/
[3]
主頁: 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]
問題頁面: https://github.com/snowdreams1006/gitbook-plugin-diff/issues
[16]
星星: 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/<code>
分享到:
閱讀更多 雪之夢技術驛站 的文章
