經常使用markdown 的玩家一定很想要一個自動生成的導航欄吧，自己寫的基本思路就是
輪詢監聽滾動條的位置，通過拋錨和跳錨實現，這里介紹一下今天的主角，markdown-toc插件：
https://github.com/jonschlinkert/markdown-toc
# 0x00 安裝
TOC = Table of content ， 將內容制作成導航
這個插件是基於 nodejs 的，因此需要安裝 node 和 npm ，這里同樣采用nvm的形式安裝
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash source ~/.bashrc nvm list-remote nvm install v10.16.0 node -v
安裝好nvm后，就可以使用npm 安裝插件了
npm install --save markdown-toc
# 0x01 命令行
經常使用markdown 的玩家一定很想要一個自動生成的導航欄吧，自己寫的基本思路就是
輪詢監聽滾動條的位置，通過拋錨和跳錨實現，這里介紹一下今天的主角，markdown-toc插件：
這個插件帶Cli命令，使用幫助如下
markdown-doc [選項] <輸入>
<輸入> 表示需要使用 TOC 的 markdown 文件，可以通過標准輸入讀取
[選項]
| -i | 直接往 <輸入> 的文件注入TOC標識符： <!-- toc -->，如果沒有這個參數就輸出到屏幕，不修改md文件 |
| --json | 通過json格式打印TOC |
| --append | 在字符串的后面追加TOC |
| --bullets | 指定需要被生成TOC項的標識符號，可以指定多個： --bullets "*" --bullets "+" |
| --maxdepth | TOC最大深度，就是可以折疊多少層，默認6層 |
| --no-stripHeadingTags | 在強力功能前，不刪去標題無關的HTML標簽 |
# 0x02 亮點
經常使用markdown 的玩家一定很想要一個自動生成的導航欄吧，自己寫的基本思路就是
輪詢監聽滾動條的位置，通過拋錨和跳錨實現，這里介紹一下今天的主角，markdown-toc插件：
特點：
1. 可根據自己的需求生成TOC模板
2. 對重復標題生效
3. 默認采用sane，也可以自己定制
4. 過濾器可以篩掉你不想要的標題
5. 導入期可以導入你想加入的標題
6. 可以使用強勁的函數來改變鏈接生成
7. 可作為 remarkable 的插件使用
很安全：
不會像其他TOC生成器一樣，破壞前面的內容，或將前面的內容屬性誤認為標題
# 0x03 用法
經常使用markdown 的玩家一定很想要一個自動生成的導航欄吧，自己寫的基本思路就是
輪詢監聽滾動條的位置，通過拋錨和跳錨實現，這里介紹一下今天的主角，markdown-toc插件：
var toc = require('markdown-toc'); toc('# One\n\n# Two').content; // Results in: // - [One](#one) // - [Two](#two)
為了自定義輸出，下面有幾個屬性將會返回
- content 自動生成導航導航的內容，你可以自定義樣式
- highest 找到最高的等級標題，用於重新調整縮進
- tokens 可自定義的標題符號
# 0x04 API
1 - toc.plugin
作為 remarkable 插件使用，如下：
var Remarkable = require('remarkable'); var toc = require('markdown-toc'); function render(str, options) { return new Remarkable() .use(toc.plugin(options)) // <= register the plugin .render(str); }
使用實例
var results = render('# AAA\n# BBB\n# CCC\nfoo\nbar\nbaz');
2 - toc.json
可生成json格式的TOC對象
toc('# AAA\n## BBB\n### CCC\nfoo').json;
// results in
[ { content: 'AAA', slug: 'aaa', lvl: 1 },
{ content: 'BBB', slug: 'bbb', lvl: 2 },
{ content: 'CCC', slug: 'ccc', lvl: 3 } ]
3 - toc.insert
在想插入TOC的位置寫上 <!-- toc --> 或者 <!--toc--> 內容 <!--tocstop-->
(使用注釋作為占位符可以避免破壞原本的代碼)
<!-- toc -->
- old toc 1
- old toc 2
- old toc 3
<!-- tocstop -->
## abc
This is a b c.
## xyz
This is x y z.
結果是
<!-- toc --> - [abc](#abc) - [xyz](#xyz) <!-- tocstop --> ## abc This is a b c. ## xyz This is x y z.
4 - 通用函數
為了方便給想定制TOC的用戶folk一份，插件提供了一些通用函數
toc.bullets(): 通過數組獲取標題標記符toc.linkify(): 鏈接到一個標題字符toc.slugify(): 從標題字符中應用強力函數toc.strip(): 從標題字符中去掉某些字符
例子
var result = toc('# AAA\n## BBB\n### CCC\nfoo'); var str = ''; result.json.forEach(function(heading) { str += toc.linkify(heading.content); });
# 0x05 選項
經常使用markdown 的玩家一定很想要一個自動生成的導航欄吧，自己寫的基本思路就是
輪詢監聽滾動條的位置，通過拋錨和跳錨實現，這里介紹一下今天的主角，markdown-toc插件：
1 - 追加 (append)
追加一些字符串到匹配的標題標識符后面
toc(str, {append: '\n_(TOC generated by Verb)_'});
2 - 過濾 (filter)
類型： 函數
默認: undefined
參數：
str 命中的標題字符串
ele 標題記號對象
arr 所有的標題對象
過濾掉一些極端的匹配命中的標題，如下就是一個壞標題
[.aaa([foo], ...) another bad heading](#-aaa--foo--------another-bad-heading)
為了去除這種極端的情況，可以使用過濾器篩掉
function removeJunk(str, ele, arr) { return str.indexOf('...') === -1; } var result = toc(str, {filter: removeJunk}); //=> beautiful TOC
3 - 強勁(slugify)
類型: 函數
默認: 默認替換掉特殊符號
例子
var str = toc('# Some Article', {slugify: require('uslug')});
4 - 符號(bullet)
類型： 字符或者數組
默認： *
就是層疊的列表符號，傳入數組 ['*', '-', '+']
5 - 首項 (first1)
類型：布爾
默認： true
排除文件中的第一個h1級標題。這樣可以防止自述文件中的第一個標題出現在TOC中
6 - 最大深度 (first1)
類型： 數字
默認： 6
最大深度
6 - 去除頭部標簽(stripHeadingTags)
類型:布爾
默認: true
去除多余的標記，類似github 的 markdown 表現