markdown自动生成侧边栏目录/TOC

markdown自动生成侧边栏TOC /目录

钻研了2天时间，找到了一个简单方法，用于生成华丽的markdown文档侧边栏目录。这里我免积分提供我的资源，希望可以让广大markdown用户不再为如何生成一个漂亮的markdown目录而头疼。

声明： 本模板是对开源项目 i5ting-i5ting_ztree_toc-0.3.0-11 的精简，主要是针对Windows下无法安装项目作者给出的软件（仅适用于Linux）的问题进行一定的优化。经过精简之后，使用方法非常简单，仅仅是 一次复制&一次粘贴。

示例效果如下图：



点击查看项目所在的官方地址

使用说明

前期工作

一款好用的文本编辑器，用来编辑html文档。推荐使用sublime text；

你的markdown文件中必须存在目录结构，即不同级别的标题。

把你的markdown文件转化成html，这一步可以使用sublime text的插件

Markdown Preview

或

OmniMarkupPreviewer

来完成。推荐使用后者，预览效果相对丰富一些；

正式开始

首先下载本模板[点此下载]；

打开下载的文件，可以看到两个文件夹，一个是“官网示例”，另一个是“我的模板”,我们只需要使用“我的模板”；

将“我的模板”复制一份出来，然后用文本编辑器打开其中的

markdownToc.html

。里面标记了两条很明显的内容分割线，你只需要把自己的html文档的正文部分复制到两条内容分割线之间即可，无需进行其他编辑。如下图所示：



保存并在浏览器中打开就可以看到生成了侧边栏目录，效果如下：

进阶玩法

如果你对文档样式不太满意，还可以更改

markdownToc_files

中的 CSS 文件。

具体说明如下：

1.zTreeStyle.css

控制页面左侧目录框内目录的显示效果，不推荐修改；

2.github1-contents.css

控制页面右侧正文的显示效果，推荐直接替换成自己的 CSS 文件。一般情况下，当你把markdown文件转化为html时会自动产生你的文档所使用的 CSS 文件。

获取方法是：在浏览器中打开你的html文件，在页面上右键，选择“另存为”，在另存为对话框中选择保存“网页，全部”，在保存下来的文件夹中就能找到你自己的 CSS 文件了。

3.具体每个 CSS 文件控制什么效果，你可以在

markdownToc.html

中注释掉某些样式或样式表的链接，观察页面发生了哪些改变。