i5ting_toc工具使用，markdown转html，目录在左侧，一键将md转html自动发布网页

markdown转html工具i5ting_toc安装

背景

使用 Markdown 编辑器写完产品的使用手册后，导出为 html文件，目录是用 toc 生成的，显示在html页面的最上方。因为使用手册的内容很多，需要将目录栏放至左侧方便跳转目录阅览，于是就不用 toc 生成，采取另外的方法。

插件介绍

这里使用的是Github上的一个JQuery插件，插件功能是 用于将markdown 转化为带样式的html字符串，正好有我们需要的左侧目录栏样式，于是采用了这个插件。

Github项目地址：node版本i5ting_toc

环境安装

依赖于node.js 故需要先安装node.js ,安装方法请自行百度

安装插件

使用下面命令进行全局安装：

npm install -g i5ting_toc

插件用法

安装好 i5ting_toc 后，就可以使用简单的命令了。比如输入i5ting_toc -h查看插件用法，如下图示：

md 文件转 html 文件

• 进入md文件所在目录，打开cmd窗口
• 输入命令i5ting_toc -f index.md -o

命令执行完后，md文件目录下生成了一个preview文件夹，我们需要的html文件夹就在里面，然后直接浏览器打开这个html即可。如下图示：

转换后的样式，目录在左边，方便阅读

i5ting_toc转成的html，怎么高亮代码

找到安装位置

全局安装一般在默认位置
C:\Users\administrator\AppData\Roaming\npm\node_modules\i5ting_toc

修改marked.js

i5ting_toc\node_modules\marked\lib\marked.js
将第804行添加class样式

class="prettyprint linenums:0"

修改后如下：

修改templete.html

i5ting_toc\vendor\template.html
引入google的高亮插件code-prettify

将 run_prettify.js 下载到本地，地址如下：
https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js

修改后如下：

需要删除已经生成的preview文件夹

否则有可能不生效

再执行编译html命令

i5ting_toc -f index.md -o

修改前后对比

• 修改前：

• 修改后：

i5ting_toc高级配置

找到 i5ting_toc 插件安装目标

• 安装目标：

C:\Users\administrator\AppData\Roaming\npm\node_modules\i5ting_toc

• 修改样式

• 修改方式

利用i5ting_toc -f index.md -o 命令生成html后，采用浏览器F12 Debug调试相应样式