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

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

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

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

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

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