Markdown转成带目录的Html(i5ting_toc)
2020-01-20 本文已影响0人
孙悟空SUN

Markdown无论在编程还是平时其他工作学习中都扮演着重要的角色,如:开发文档、产品说明,甚至是流程图......
但是有的时候需要我们以网页形式展示给他人阅读,当遇到这种场景时候我们需要从两个方面考虑该问题:1.是不是可以直接找个框架直接在线吧md文档转一下?2.是不是工具直接把md转成html文件,然后发布出去?相比较之下我选择了后者。
废话不多说上干货需要原料:git、node(此处不做赘述,自行百度安装)
需要一个开源库:i5ting_toc(https://github.com/i5ting/tocmd.npm)
步骤1:找个文件夹:如a文件夹,安装i5ting_toc,
npm install -g i5ting_toc

步骤2:把你的md文件拷至a文件夹下,如:b.md;

步骤3:cmd命令进入该文件下:
i5ting_toc -f b.md is for sale! -o
npm 从5.2版开始,增加了 npx 命令,当执行上面语句不能用时候,可以使用
npx i5ting_toc -f b.md is for sale! -o
到此已经生成

preview文件夹下

-------------------------分割线-:下面是一些小拓展--------------------
1.生成到不同文件夹下面
找到i5ting_toc安装路径,node_modules

打开

62行改一下你想要的的文件夹名称

改为

再打开


改为

cmd执行
i5ting_toc -f sample.md -o
或者
npx i5ting_toc -f sample.md -o



代码没有高亮怎么办,下一章我会讲讲怎样修改