使用Typora来编写Markdown文档时，可以很方便的生成目录，但是生成的目录是随着页面滚动的，点击了一个条目跳转后，想再次回到目录位置比较麻烦。我们浏览网站时常见的是在左右有一个固定不动的目录，这样点击跳转比较方便。

单击菜单：段落–>内容目录，即可给文档生成一个目录。

接下来设置目录生成在左边：
打开：文件–》偏好设置–》外观–》打开主题文件夹
创建 “base.user.css” 文件，并输入如下代码：

.md-toc{position: fixed; left: 50px;top: 50px;
}

重启一下Typora，打开一个带目录的markdown文档，此时会看到目录显示不正常，没关系，当你导出html后，打开html查看效果就是OK的了，效果截图如下：

重大更新

最新版本已经不需要这么复杂了（我当前的版本是v1.2.5），Typro已经内置导出导航的功能，设置如下：

从菜单中选择：文件 > 编好设置 > 导出 > HTML，然后勾选保留大纲侧边栏即可，如下：

然后我们编写一个Markdown文件，内容如下：

# 标题1
## 子标题1
## 子标题2# 标题2
## 子标题1
## 子标题2# 标题3
# 标题4

然后导出 html 即可，打开导出的 html 文件，效果如下：

对于子标题，还可以展开或折叠。

Markdown生成左侧目录相关推荐

Markdown 生成侧边目录
工具: visual studio code + Markdown Preview Enhanced插件步骤: 1. 用vscode打开 xxx.md 并打开MPE的侧边预览 2. 将光标放到第一行 ...
Markdown生成左边框目录
自从接触了Markdown后就一直用这种语言写学习笔记. 但是一直在纠结如何生成方便的目录. 下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录. 就是这种第一步,编辑器首先,需要一个可以自动 ...
markdown自动生成导航目录
把这一段代码插入到markdown生成的HTML文件的head标签中,将会自动根据markdown的标题按级别生成导航目录 <script src="http://code.jquer ...
为jupyter的Markdown标题生成大纲目录
为markdown生成类似word的标题大纲目录,可以清晰的看见代码架构,快速准确的定位到代码段,而不必再从上到下一直翻. 共需四步: (1)打开命令行,切换到需要安装的环境,输入以下命令: pip ...
cad图纸目录自动生成插件_如何自动生成论文目录？
一篇论文的内容很多,因此需要各种分级标题,如果论文没有目录的话,文章就看不懂了.导师在看你的论文时,看目录就可以大致了解论文的内容,如果对某论点感兴趣,可以根据目录找到对应的位置.因此目录是非常重要的 ...
JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮进入网页管理->设置在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式此处可以将背景色background-co ...
大论文自动生成标题目录、图目录和表目录
大论文自动生成标题目录.图目录和表目录到了写大论文的时间啦,结果卡在了目录生成这里,各种小问题,网上找了找,没有一个较为系统地说明,花费了一些时间,在这里系统地介绍一下. 标题目录自动生成 1.刚 ...
hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录
Hexo提供了诸多插件来增强博客体验,地址http://hexo.io/plugins/. 在博客搬迁的时发现一个生成文章目录的插件,hexo-toc. hexo-toc为防插件误认标记,文章以下出现 ...
word中自动生成的目录中，编号和文本间距过大
问题: word中自动生成的目录中,编号和文本间距过大,如下图所示: 解决办法: 在正文中,调整列表缩进--更多--编号之后--设置为"空格". 如果经过1步骤后,正文中的编号和后 ...
简单操作用R Markdown生成HTML和PDF文件
文章目录 Output formats PDF HTML Output formats RMarkdown通过knitr来将代码块运行并与.Rmd文件中文本内容合并生成.md文件后通过Pandoc这个 ...

Markdown生成左侧目录

重大更新

Markdown生成左侧目录相关推荐

最新文章

热门文章