Markdown技巧之页面内跳转和自动提取目录

rain start to pour

于 2021-03-24 16:30:58 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：技能技巧文章标签： markdown html5 visual studio code

本文链接：https://blog.csdn.net/Toniest4792/article/details/115179605

技能技巧专栏收录该内容

8 篇文章

订阅专栏

"本文介绍了如何在Markdown文档中实现类似Word的目录结构，并提供页面内的跳转功能。通过使用@[TOC]生成目录，以及定义锚点和链接语法，读者可以方便地在长文中导航。例如，通过`<span id="jumpHere">`定义锚点，然后用`[点击这里进行跳转](#jumpHere)`创建跳转链接。同时，文章展示了不同级别的标题示例，以演示目录结构的生成。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

易遇到的场景：在页面内添加的目录内容，不只是能被Typora等工具侧边栏展示提取，还希望如同Word等文件的前面给出目录-子标题列表；或者是在比较长的文件中，希望跳转到当前文件之前（后）的内容。

此处的目录即使用@[TOC]自动生成

文章目录

页面内跳转

需要定义一个锚点，也就是标记跳转到的位置，语法格式如下，点击¹就可以跳转

...
# 1. 定义锚点，跳转到这里
<span id="jumpHere">这是你希望跳转到的地方</span>
...
# 2. 使用markdown的链接语法，url位置使用#筛选锚点
[点击这里进行跳转](#jumpHere)

示例：

点击跳转当前语法格式

文章目录

目录自动生成

在要生成目录的地方写：[TOC]即可按照标题生成目录
有些Markdown编辑器需要写:[TOC]或者@[TOC]

@[TOC]
## 可以清心也
@[TOC]
### 以清心也可
@[TOC]
#### 清心也可以
@[TOC]
## 心也可以清

有可能需要配合按下Ctrl键 ↩︎