有没有 markdown 生成 HTML 带侧边目录，并且跟随阅读位置标记当前目录位置，这样的一个工具或者样式

[NeoChen]

类似于在 typora 里打开大纲目录的阅读效果

[tadtung]

这类还是挺多的。。。

例如 docsify
演示： http://doc.30d.bid

[tamlok]

VNote 导出为 html 的时候自带可跟随的导航栏

[sofm]

gitbook 了解下
案例：
http://zitiao.org/material-design/material-design-intro/introduction.html
或者换成其他主题

[icanlynn]

这几天正好在写帮助文档，和楼主的需求一模一样。
找到了个 js 插件很方便

typora 里面 引入一个 jquery，一个 js，一个 css，还算比较满意。

稍后我贴到 git 上

[tadtung]

docsify 主要就是方便，引入 docsify.min.js 后直接将 md 文件放在目录就行。
我自己以前也写过 markdown 转义 html，，不过不如 docsify 方便，，所以后来就直接用这个了。

[wangxiaoaer]

借楼问一下，有没有类似的文档工具，并且里面可以放交互页面的？类似嵌入一个自由域名下的 jsfiddle

[icanlynn]

https://github.com/icanleric/other/blob/master/Typora%202%20Html%E5%B8%A6%E7%9B%AE%E5%BD%95.md

[NeoChen]

@icanlynn 感谢感谢~ 最符合期望

[NeoChen]

@icanlynn 还差最后一个小问题，如果目录展示能适配手机端就更棒了

[niceshell]

看到楼上竟然有工具，我前几天刚刚做了类似的工作，不过是对 markdown 编辑器生成的 html 进行处理生成了目录

[NeoChen]

@niceshell 可否分享一下，感谢感谢~ ~

[niceshell]

@NeoChen 只是简单的实现我是用 vue 写的(模仿掘金的目录)，然后现在还有问题屏幕里面没有标题的时候还无法显示位置（目录标记消失），目录不能够关闭展开。网上有类似的实现你可以看看

[icanlynn]

@NeoChen 这个应该可以在那个 js 文件里加一下，比如手机端的时候，隐藏侧边栏（目前已经实现），显示一个悬浮的“ menu 图标” ，点击一下再展开侧边栏（可能需要调整下层级）。你可以试试，我本人不是专业做技术的，懒得弄了哈哈

[zhezhi]

正需要，收藏。谢谢！

[111qqz]

1

[111qqz]

按错了，不好意思

[IdJoel]

收藏了 回家试试

[DarrenLuo]

好像有个插件，toc

[mrchi]

我博客解决方案是：自己写了一段 js，遍历 markdown 转成 html 之后的标题，生成目录，然后监听滚动事件，效果还行，大概 30 行。

代码： https://github.com/chiqj/MrChiBlog/blob/cd8c0145628e2c6166fe713efdf59a846d10dc47/blog/templates/post.html#L62

效果： https://blog.mrchi.cc/p/19428f6079a5b2e33ca240071af80687


不过最近准备拥抱 hexo 了，作为一个后端开发，写的页面感觉不好看= =

[yumenawei]

https://madmaxchow.github.io/VLOOK/
你可能需要的是这个。

[NeoChen]

@icanlynn 生成的目录 ID 编号似乎有问题，除了开始的 h1 h2 可以正常 id=wow1, id=wow1_2 这样，后续的都只有 wow。
搜索了一些资料，改成类似原生的 id，wow_1，wow_2.....这样可以正常使用了
就改了以下部分，对比一下源代码即可
```
var vH1Index = 0;
var vH2Index = 0;
var menuIndex = 0;
$("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
var id = '';
// var name = '';
var tag = $(item).get(0).tagName.toLowerCase();
//不同标题,不同 className,不同字体大小
var className = '';
if (tag == vH1Tag) {
// id = name = ++vH1Index;
// name = id;
vH2Index = 0;
className = 'item_h1';
} else if (tag == vH2Tag) {
// id = vH1Index + '_' + ++vH2Index;
// name = vH1Index + '.' + vH2Index;
className = 'item_h2';
}
//修改 id 生成策略
id = "_" + menuIndex;
menuIndex++;

$(item).attr("id","wow"+id);
$(item).addClass("wow_head");
```

[NeoChen]

@yumenawei 早些时候就有关注过，功能确实很强大，但是就是太强大了，反而显得繁琐了。就希望简简单单，和 typora 打开大纲栏一样。

[Heanes]

我自己写了个类似百度百科的目录的插件，不过移动端还没有适配

[NeoChen]

@tadtung 试了一下，也是超级简单！
只要参考 https://docsify.js.org/#/zh-cn/quickstart?id=%E6%89%8B%E5%8A%A8%E5%88%9D%E5%A7%8B%E5%8C%96
创建一个 index.html，然后把想要展示的 md 文档改名成 README.md ，放在一个目录下，然后上传服务器，直接打开即可。

[thonatos]

找个 TOC 插件就完事了....

[knight3r]

@NeoChen 亲这个上传到服务器是可以用 PYTHON 的 http.server 创建的吗？

[NeoChen]

@knight3r 应该可以