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

i5ting · 发布于 2014年1月27日 · 最后由 westup 回复于 2014年7月02日 · 38936 次阅读
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

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

5173

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

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

5173

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

5173

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

2653

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

5173

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

7822

哈哈哈, 首先支持一个!

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

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

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

5173

#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

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

1704

Cool!非常牛

96

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

5173

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

273

赞!

96

非常不错,顶一个

96

gem intall tocmd install打错了呢

5173

#19楼 @oran 谢谢,已修改

487

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

5173

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

5173

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

5173

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

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

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

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

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

##aa

## aa

推荐后者

25楼 已删除
5173

@huacnlee @lgn21st @Rei

请把kgtonglousy禁言,大量广告

1

#26楼 @i5ting 已处理

96

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

6076

赞一个

96

demo的教程非常不错

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