Daring Fireball: Markdown CommonMark MacDown Open Source Markdown Editor Marked GitHub Flavored Markdown
有没有 markdown 生成 HTML 带侧边目录，并且跟随阅读位置标记当前目录位置，这样的一个工具或者样式
NeoChen 2019-03-28 15:10:32 +08:00 21696 次点击这是一个创建于 2389 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似于在 typora 里打开大纲目录的阅读效果
 | 1 tadtung 2019-03-28 15:58:27 +08:00  2 这类还是挺多的。。。 例如 docsify 演示： http://doc.30d.bid |
 | 2 tamlok 2019-03-28 15:59:19 +08:00 via Android 1 VNote 导出为 html 的时候自带可跟随的导航栏 |
 | 3 sofm 2019-03-28 16:13:14 +08:00 1 |
 | 4 icanlynn 2019-03-28 16:41:51 +08:00 1 这几天正好在写帮助文档，和楼主的需求一模一样。 找到了个 js 插件很方便 typora 里面 引入一个 jquery，一个 js，一个 css，还算比较满意。 稍后我贴到 git 上 |
| 5 tadtung 2019-03-28 16:42:54 +08:00 docsify 主要就是方便，引入 docsify.min.js 后直接将 md 文件放在目录就行。 我自己以前也写过 markdown 转义 html，，不过不如 docsify 方便，，所以后来就直接用这个了。 |
 | 6 wangxiaoaer 2019-03-28 16:54:22 +08:00 借楼问一下，有没有类似的文档工具，并且里面可以放交互页面的？类似嵌入一个自由域名下的 jsfiddle |
| 7 icanlynn 2019-03-28 16:57:55 +08:00 1 |
 | 10 niceshell 2019-03-28 17:33:01 +08:00 1 看到楼上竟然有工具，我前几天刚刚做了类似的工作，不过是对 markdown 编辑器生成的 html 进行处理生成了目录 |
| 12 niceshell 2019-03-28 17:45:39 +08:00 @NeoChen 只是简单的实现我是用 vue 写的(模仿掘金的目录)，然后现在还有问题屏幕里面没有标题的时候还无法显示位置（目录标记消失），目录不能够关闭展开。网上有类似的实现你可以看看 |
| 13 icanlynn 2019-03-28 17:54:48 +08:00 @NoChen 这个应该可以在那个 js 文件里加一下，比如手机端的时候，隐藏侧边栏（目前已经实现），显示一个悬浮的“ menu 图标” ，点击一下再展开侧边栏（可能需要调整下层级）。你可以试试，我本人不是专业做技术的，懒得弄了哈哈 |
 | 14 zhezhi 2019-03-28 17:55:58 +08:00 正需要，收藏。谢谢！ |
 | 15 midasplus 2019-03-28 18:00:11 +08:00 via Android 1 |
| 16 midasplus 2019-03-28 18:12:09 +08:00 via Android 按错了，不好意思 |
 | 17 IdJoel 2019-03-28 18:16:06 +08:00 收藏了 回家试试 |
 | 18 DarrenLuo 2019-03-28 18:41:00 +08:00 via Android 好像有个插件，toc |
 | 19 mrchi 2019-03-28 18:45:43 +08:00 2 我博客解决方案是：自己写了一段 js，遍历 markdown 转成 html 之后的标题，生成目录，然后监听滚动事件，效果还行，大概 30 行。 代码： https://github.com/chiqj/MrChiBlog/blob/cd8c0145628e2c6166fe713efdf59a846d10dc47/blog/templates/post.html#L62 效果： https://blog.mrchi.cc/p/19428f6079a5b2e33ca240071af80687 不过最近准备拥抱 hexo 了，作为一个后端开发，写的页面感觉不好看= = |
 | 20 yumenawei 2019-03-28 21:16:52 +08:00 https://madmaxchow.github.io/VLOOK/ 你可能需要的是这个。 |
 | 21 NeoChen OP @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"); ``` |
| 22 NeoChen OP @yumenawei 早些时候就有关注过，功能确实很强大，但是就是太强大了，反而显得繁琐了。就希望简简单单，和 typora 打开大纲栏一样。 |
 | 23 Heanes 2019-03-29 09:21:36 +08:00 我自己写了个类似百度百科的目录的插件，不过移动端还没有适配 |
| 24 NeoChen OP @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 ，放在一个目录下，然后上传服务器，直接打开即可。 |
 | 25 SuYia 2019-03-29 10:58:47 +08:00 找个 TOC 插件就完事了.... |
Select Language