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

i5ting · 2014年01月27日 · 最后由 ahosis 回复于 2018年10月04日 · 72262 次阅读

本帖已被管理员设置为精华贴

大家是否为 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 步骤

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

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

已发布到 jquery 官方插件中，地址：http://plugins.jquery.com/ztree_toc/
修复在线演示问题，给出新地址http://i5ting.github.io/i5ting_ztree_toc/build/jquery.plugin.html

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

25 个赞

krazy #1 2014年01月27日

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

i5ting #2 2014年01月27日

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

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

i5ting #3 2014年01月27日

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

i5ting #4 2014年01月27日

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

chunlea #5 2014年01月27日

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

i5ting #6 2014年01月27日

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

hick #7 2014年01月28日

哈哈哈，首先支持一个！

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

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

1 个赞

i5ting #8 2014年01月28日

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

i5ting #9 2014年01月28日

#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 长了很有用