一段JS代码让Markdown自动生成侧边栏目录

不折腾不行小王子今天接到挑战两个问题：markdown怎么定位锚点，怎么生成目录。这其实也是我最近一直在想的，之前看到这样一个项目Gitbook

用github和Markdown写教程书

感觉不错，但是要装node.js，而且写到github上也不安全，公司的东西不能写过去。

锚点

首先，锚点很好解决，比如这里

MarkDown中锚的使用

上文提到的处理方法其实复杂了，简单的其实在mou里就有了介绍：

Anchor
You can also add an anchor for an element such as Headers, then you can link to this anchor anywhere, when you click that link in the Preview view, it'll auto scroll to the place of the destination anchor.
For example below is a normal h2 Header:

This is an example

Now we add an anchor for it, here we use the name "anchor1" for the anchor, of course you can use any name you want.

This is an example

If you want to link to this anchor, simply write like this:
Click this link in the Preview view will auto scroll to the place of the destination anchor.

PS:mou是国人开发的免费markdown编辑器，功能强大。

官网地址：mou

目录

其次是目录，其实搜索“markdown toc”可以看到很多，比如

在markdown插入一段代码就可以生成目录

用法就是把这段代码考到mou里要写的内容前面就好了。如作者所说，mou导出到pdf就不行了。

但是这还是不是我的最终追求。

侧边栏目录

这种侧边栏式的布局最适合写文档看目录用，很快就找到这个

用js实现的侧边栏布局markdown，还能自动编号

这个非常强大了，看截图

完全实现目标。我为了减少一点复杂程度，剃掉了其他的东西就保留了js，重新弄了一下。

精简版代码

还是需要前后复制粘贴一下就好了。

作者其实给出了更简单的办法，用ruby直接转换，但是我的ruby老是出问题，没弄成。考虑到别人更不一定有ruby，就还是用粘贴的方式吧。

markdown相关

找上面这些内容的时候看到这些资源和文章，也都不错。

关于markdown的进阶

Markdown 语法写作入门指南

关于markdown的css

美化Markdown输出的HTML文档

关于用markdown写幻灯片

Remarkjs: 使用 Markdown 做幻灯

说到幻灯片插播一个

几个秒杀PPT的高（zhe）大(teng)上(ren)的幻灯工具

这是用python写的给markdown生成目录，研究了一下么看懂哈

用 Markdown 来给开源项目写文档