关于 Markdown 的 ToC,你还想要什么功能?

开源项目 · i5ting · Created at · Last by westup Replied at · 3825 hits
5173

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

本帖已被设为精华帖!
共收到 29 条回复
96
krazy · #1 ·

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

5173
i5ting · #2 ·

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

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

5173
i5ting · #3 ·

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

5173
i5ting · #4 ·

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

2653
chunlea · #5 ·

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

5173
i5ting · #6 ·

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

7822

哈哈哈, 首先支持一个!

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

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

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

5173
i5ting · #9 ·

#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,默认就有展开关闭的功能

感谢反馈

5173
i5ting · #11 ·

已给出 在线演示

5173

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

5173
i5ting · #13 ·

代码已更新,欢迎反馈https://github.com/i5ting/i5ting_ztree_toc

1704

Cool!非常牛

96

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

5173
i5ting · #16 ·

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

273
ruby_sky · #17 ·

赞!

96
tshi0912 · #18 ·

非常不错,顶一个

96

gem intall tocmd
install打错了呢

5173
i5ting · #20 ·

#19楼 @oran 谢谢,已修改

96

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

5173
i5ting · #22 ·

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

5173
i5ting · #23 ·

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

5173
i5ting · #24 ·

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

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

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

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

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

##aa

## aa

推荐后者

25Floor has deleted
5173
i5ting · #26 ·

@huacnlee
@lgn21st
@Rei

请把kgtonglousy禁言,大量广告

1
rei · #27 ·

#26楼 @i5ting 已处理

96

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

6076
xisi · #29 ·

赞一个

96
westup · #30 ·

demo的教程非常不错

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up