V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Daring Fireball: Markdown
CommonMark
MacDown Open Source Markdown Editor
Marked
GitHub Flavored Markdown
NeoChen
V2EX  ›  Markdown

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

  •  
  •   NeoChen · 2019-03-28 15:10:32 +08:00 · 20776 次点击
    这是一个创建于 1827 天前的主题,其中的信息可能已经有所发展或是发生改变。
    类似于在 typora 里打开大纲目录的阅读效果
    27 条回复    2019-06-28 21:56:47 +08:00
    tadtung
        1
    tadtung  
       2019-03-28 15:58:27 +08:00   ❤️ 2
    这类还是挺多的。。。

    例如 docsify
    演示: http://doc.30d.bid
    tamlok
        2
    tamlok  
       2019-03-28 15:59:19 +08:00 via Android   ❤️ 1
    VNote 导出为 html 的时候自带可跟随的导航栏
    sofm
        3
    sofm  
       2019-03-28 16:13:14 +08:00   ❤️ 1
    gitbook 了解下
    案例:
    http://zitiao.org/material-design/material-design-intro/introduction.html
    或者换成其他主题
    icanlynn
        4
    icanlynn  
       2019-03-28 16:41:51 +08:00   ❤️ 1
    这几天正好在写帮助文档,和楼主的需求一模一样。
    找到了个 js 插件很方便

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

    稍后我贴到 git 上
    tadtung
        5
    tadtung  
       2019-03-28 16:42:54 +08:00
    docsify 主要就是方便,引入 docsify.min.js 后直接将 md 文件放在目录就行。
    我自己以前也写过 markdown 转义 html,,不过不如 docsify 方便,,所以后来就直接用这个了。
    wangxiaoaer
        6
    wangxiaoaer  
       2019-03-28 16:54:22 +08:00
    借楼问一下,有没有类似的文档工具,并且里面可以放交互页面的?类似嵌入一个自由域名下的 jsfiddle
    NeoChen
        8
    NeoChen  
    OP
       2019-03-28 17:15:34 +08:00
    @icanlynn 感谢感谢~ 最符合期望
    NeoChen
        9
    NeoChen  
    OP
       2019-03-28 17:27:22 +08:00
    @icanlynn 还差最后一个小问题,如果目录展示能适配手机端就更棒了
    niceshell
        10
    niceshell  
       2019-03-28 17:33:01 +08:00   ❤️ 1
    看到楼上竟然有工具,我前几天刚刚做了类似的工作,不过是对 markdown 编辑器生成的 html 进行处理生成了目录
    NeoChen
        11
    NeoChen  
    OP
       2019-03-28 17:35:38 +08:00
    @niceshell 可否分享一下,感谢感谢~ ~
    niceshell
        12
    niceshell  
       2019-03-28 17:45:39 +08:00
    @NeoChen 只是简单的实现我是用 vue 写的(模仿掘金的目录),然后现在还有问题屏幕里面没有标题的时候还无法显示位置(目录标记消失),目录不能够关闭展开。网上有类似的实现你可以看看
    icanlynn
        13
    icanlynn  
       2019-03-28 17:54:48 +08:00
    @NeoChen 这个应该可以在那个 js 文件里加一下,比如手机端的时候,隐藏侧边栏(目前已经实现),显示一个悬浮的“ menu 图标” ,点击一下再展开侧边栏(可能需要调整下层级)。你可以试试,我本人不是专业做技术的,懒得弄了哈哈
    zhezhi
        14
    zhezhi  
       2019-03-28 17:55:58 +08:00
    正需要,收藏。谢谢!
    111qqz
        15
    111qqz  
       2019-03-28 18:00:11 +08:00 via Android
    1
    111qqz
        16
    111qqz  
       2019-03-28 18:12:09 +08:00 via Android
    按错了,不好意思
    IdJoel
        17
    IdJoel  
       2019-03-28 18:16:06 +08:00
    收藏了 回家试试
    DarrenLuo
        18
    DarrenLuo  
       2019-03-28 18:41:00 +08:00 via Android
    好像有个插件,toc
    mrchi
        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 了,作为一个后端开发,写的页面感觉不好看= =
    yumenawei
        20
    yumenawei  
       2019-03-28 21:16:52 +08:00
    https://madmaxchow.github.io/VLOOK/
    你可能需要的是这个。
    NeoChen
        21
    NeoChen  
    OP
       2019-03-29 09:14:14 +08:00
    @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
        22
    NeoChen  
    OP
       2019-03-29 09:17:03 +08:00
    @yumenawei 早些时候就有关注过,功能确实很强大,但是就是太强大了,反而显得繁琐了。就希望简简单单,和 typora 打开大纲栏一样。
    Heanes
        23
    Heanes  
       2019-03-29 09:21:36 +08:00
    我自己写了个类似百度百科的目录的插件,不过移动端还没有适配
    NeoChen
        24
    NeoChen  
    OP
       2019-03-29 09:39:10 +08:00
    @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
        25
    thonatos  
       2019-03-29 10:58:47 +08:00
    找个 TOC 插件就完事了....
    knight3r
        26
    knight3r  
       2019-06-28 15:14:08 +08:00
    @NeoChen 亲这个上传到服务器是可以用 PYTHON 的 http.server 创建的吗?
    NeoChen
        27
    NeoChen  
    OP
       2019-06-28 21:56:47 +08:00 via iPhone
    @knight3r 应该可以
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3106 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 12:57 · PVG 20:57 · LAX 05:57 · JFK 08:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.