markdown自动生成侧边栏目录/TOC
来源:互联网 发布:c语言项目开发流程 编辑:程序博客网 时间:2024/06/05 02:38
markdown自动生成侧边栏TOC /目录
- 钻研了2天时间,找到了一个简单方法,用于生成华丽的markdown文档侧边栏目录。这里我免积分提供我的资源,希望可以让广大markdown用户不再为如何生成一个漂亮的markdown目录而头疼。
- 声明: 本模板是对开源项目 i5ting-i5ting_ztree_toc-0.3.0-11 的精简,主要是针对Windows下无法安装项目作者给出的软件(仅适用于Linux)的问题进行一定的优化。经过精简之后,使用方法非常简单,仅仅是 一次复制&一次粘贴。
示例效果如下图:
点击查看项目所在的官方地址
使用说明
前期工作
一款好用的文本编辑器,用来编辑html文档。推荐使用sublime text;
你的markdown文件中必须存在目录结构,即不同级别的标题。
把你的markdown文件转化成html,这一步可以使用sublime text的插件
Markdown Preview
或OmniMarkupPreviewer
来完成。推荐使用后者,预览效果相对丰富一些;
正式开始
首先下载本模板[点此下载];
打开下载的文件,可以看到两个文件夹,一个是“官网示例”,另一个是“我的模板”,我们只需要使用“我的模板”;
将“我的模板”复制一份出来,然后用文本编辑器打开其中的
markdownToc.html
。里面标记了两条很明显的内容分割线,你只需要把自己的html文档的正文部分复制到两条内容分割线之间即可,无需进行其他编辑。如下图所示:保存并在浏览器中打开就可以看到生成了侧边栏目录,效果如下:
进阶玩法
如果你对文档样式不太满意,还可以更改 markdownToc_files
中的 CSS 文件。
具体说明如下:
1.zTreeStyle.css
控制页面左侧目录框内目录的显示效果,不推荐修改;
2.github1-contents.css
控制页面右侧正文的显示效果,推荐直接替换成自己的 CSS 文件。一般情况下,当你把markdown文件转化为html时会自动产生你的文档所使用的 CSS 文件。
获取方法是:在浏览器中打开你的html文件,在页面上右键,选择“另存为”,在另存为对话框中选择保存“网页,全部”,在保存下来的文件夹中就能找到你自己的 CSS 文件了。
3.具体每个 CSS 文件控制什么效果,你可以在 markdownToc.html
中注释掉某些样式或样式表的链接,观察页面发生了哪些改变。
- markdown自动生成侧边栏目录/TOC
- vim的侧边栏目录插件
- Markdown写接口文档,自动添加TOC
- 为 Markdown 生成 TOC 的 Vim 插件
- ecshop文章侧边栏导航,自动调用文章多级子栏目分类并且当前栏目及父栏目高亮显示
- gitlab markdown 支持TOC解决办法
- Vim下markdown TOC解决方案
- 支持自动TOC超文本目录生成的chm转换器(perl脚本)
- 支持自动TOC超文本目录生成的chm转换器(perl脚本)
- markdown自动生成导航目录
- markdown自动生成导航栏
- TOC
- js栏目生成
- dedecms生成栏目文档
- 显示与隐藏侧边栏目的js代码
- Ecshop模板开发(十八):侧边栏目分类列表
- markdown语法小记录
- Dedecms 火车采集器免登陆发布接口,自动生成上下篇、栏目页、首页
- eclipse for javaee 将 maven-webapp 工程转换成web工程
- Python 易犯错误
- Docker的安装,配置,更新和卸载
- 步进电机使用总结之噪声、振动的抑制
- centOS下安装ettercap
- markdown自动生成侧边栏目录/TOC
- hadoop学习序曲之java基础篇--java静态
- 浅析标识常量、常量指针、指针常量、指向常量的指针常量的区别
- HDU1134
- 【bzoj 2154】Crash的数字表格(莫比乌斯反演)
- Android中的CursorAdapter
- 【一天一道LeetCode】#25. Reverse Nodes in k-Group
- 8项目3
- Xml学习笔记(一):xml语法格式