开源项目 关于 Markdown 的 ToC,你还想要什么功能?

i5ting · 2014年01月27日 · 最后由 ahosis 回复于 2018年10月04日 · 66159 次阅读
本帖已被设为精华帖!

大家是否为 markdown 没办法生成 toc(Table of Content)而苦恼?

写了个 jq 插件,可以根据 h1 到 h6 自动生成 toc,并且可以自动编号

源码 jQuery.zTree_Toc.js

在线演示

项目主页

给出效果图如下:

Checklist

  • Completely customizable documment selector: 'body' 自定义 header 文档位置,此处为 jq 的选择器(已完成)
  • is_auto_number: false, 默认是否显示 header 编号(已完成)
  • is_expand_all: true,默认是否展开全部(已完成)
  • is_highlight_selected_line 是否对选中行,显示高亮效果(TODO)
  • Click to smooth scroll to that spot on the page(TODO)
  • Automatically highlight the current section(TODO)
  • Extremely lightweight (744 bytes gzipped)(TODO)
  • Can have multiple on a page(TODO)

markdown 生成 toc 步骤

  1. markdown 转 html
  2. html 中嵌入插件代码,根据 h1 到 h6 自动生成 toc
  3. 利用锚点定位

toc markdown previewer gem

通过执行 tocmd 命令,把 *.md 转成 html,并带有 toc 功能,一个简单的 wrapper,希望大家喜欢

目前版本 v0.0.8

安装

gem install tocmd

用法

指定单个文件

tocmd -f shiti.md

指定目录

tocmd -d .

求反馈

目前已经满足我自己的需求了,关于 ToC,大家还想要什么功能?


update 2013-02-06

更新

  • tocmd v0.0.9
  • jQuery.zTree_Toc.js v0.2.0

update 2013-02-08

更新

  • tocmd v0.1.3
  • .ztree_toc.js

0.2.3 / 2014-02-08

  • fixed: 另存为的文件里会有编号,所以有编号的就不再重新替换
  • 360 浏览器下显示还不正常,todo

0.2.3 / 2014-02-10

欢迎关注我的公众号【node 全栈】 node全栈.png

锚点是算出来的还是可以自己指定的?

#1 楼 @krazy 是根据 header 编号算出来的

比如 1.1.2 会对应 10102,这个地方还需要一步优化,现在 step=100,以后应该取 header 子项最大的树作为 step

没有用 grunt init:jquery 创建项目,有点小忧伤,改了一小会

自己补一个,一个命令可以完成预览

先赞一个。不过,Jekyll 使用 kramdown 可以提供 ToC 功能。Stackedit 的 ToC 功能异常强大。

#5 楼 @chunlea 嗯,谢谢啊,py 的 md 解释器里也有 toc 的,我先去看看 Stackedit 和 kramdown,哇哈哈

哈哈哈, 首先支持一个!

"是否对选中行,显示高亮效果" 只是在 TOC 里? 个人感觉 TOC 一般是针对比较长的文档的阅读特别方便, 长文档还几个工具,百度百科做的还不错:

  1. TOC 一直浮动展示, 不至于点到文档末尾切换 toc 就麻烦了.
  2. 可以控制自动展开下级菜单, 同时关闭其他打开的菜单---toc 长了很有用

增加了 toc markdown previewer gem,通过执行 tocmd 命令,把 *.md 转成 html,并带有 toc 功能,一个简单的 wrapper,希望大家喜欢

#7 楼 @hick

1、关于浮动

可以自己用 css 控制

<ul id="tree" class="ztree">
</ul>

2、关于浮动

可以自己用 js 控制

$(document).ready(function(){
    $('#tree').ztree_toc({
        ztreeStyle: {
            width:'260px',
            overflow: 'auto',
            position: 'fixed',
            'z-index': 2147483647,
            border: '0px none',
            left: '0px',
            top: '0px'
        }
    });
});

3、 可以控制自动展开下级菜单, 同时关闭其他打开的菜单---toc 长了很有用

  • 插件有一个参数,默认是否展开全部
  • 由于使用 ztree,默认就有展开关闭的功能

感谢反馈

滚动更新左侧 toc 当前项已完成,代码 7 号放出,家里无网

Cool!非常牛

...这...就别放在新手问题里了....

#15 楼 @ruohanc 放到开源项目里,您看行么?非常感谢反馈

非常不错,顶一个

gem intall tocmd install打错了呢

#19 楼 @oran 谢谢,已修改

#20 楼 @i5ting 在线演示失效了吧

#21 楼 @blackanger 谢谢啊,已修复在线演示问题,给出新地址http://i5ting.github.io/i5ting_ztree_toc/build/jquery.plugin.html ,欢迎查看

@luikore 大侠竟然给这个项目 star 了,哇哈哈

http://i5ting.github.io/git-quick-start/preview/index.html的时候,发现了一个问题

tocmd 在生成文档的时候,本地预览是没有问题,但是在上传 gh-pages 样式丢失,样式在 gem 里当然会丢失了,应该再多加一个参数

另外,应该有有选项生成广告语(可选)

本文由开源项目 ztree_toc 生成,欢迎大家使用反馈

还有大家写 markdown 的时候要规范

##aa

## aa

推荐后者

25楼 已删除

@huacnlee @lgn21st @Rei

请把 kgtonglousy 禁言,大量广告

其实我觉得是图书这种需求的话 可以试试 asciidoc 已经 git-scribe~ 或者 ReStructuredText ~ 不必执着于 markdown 呀~

赞一个

demo 的教程非常不错

太棒了,用来给小说做目录正合适。提个小 bug,md 里用了<a href="https://xxxxxx">xx</a>,这之后所有的文本都会变成蓝色加下划线。

如下图。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册