生成完美中文编码目录列表[TOC]的终极解决方案 - 用 VSCode 写 Markdown 文档经验总结系列

生成完美中文编码目录列表[TOC]的终极解决方案 - 用 VSCode 写 Markdown 文档经验总结系列

• 1 前言
• 2 用 TOC 语法生成目录列表
  • 2.1 用 TOC 语法自动生成目录
  • 2.2 各网站的用法差异和效果
  • 2.3 MPE 插件对TOC语法的扩展
• 3 生成目录列表 TOC 并插入到文档中
  • 3.1 用 MPE 插件生成 TOC 并插入到文档
  • 3.2 使用 Markdown TOC 插件生成 TOC
• 4 中文编码目录列表 TOC 终极解决方法
  • 4.1 安装 Auto Markdown TOC 插件
  • 4.2 用正则表达式对目录锚点 ID 大写转小写
• 5 总结

1 前言 ☰

在之前写的《用 VSCode 打造宇宙最强 Markdown 编辑器》系列几篇博文已经讲解了用 VSCcode + Markdown 插件编写文档的基础技能，对于文章的目录列表 TOC，最初试验时发现 MPE 插件已内置了类似 Markdown TOC 插件的 TOC 生成功能，创建目录列表就是小菜一碟。不过在写了几篇中文贴之后突然发现，Markdown文档的 TOC 对中文字符编码的目录列表的支持问题多多，网上查到的所有方法都存在问题。只好自力更生，整理了一个可以说目前为止最完美的中文目录列表生成方法，和我整理的 TOC 功能汇总资料，一并分享给大家。

2 用 TOC 语法生成目录列表 ☰

2.1 用 TOC 语法自动生成目录 ☰

VSCode 中用 MPE 编写 Markdown，支持通过 [TOC] 语法将目录插入到文档的任何位置，同时还会在侧边栏显示相同目录，便于预览时选择跳转。需要注意的是：这种方式创建的 TOC 目录只会在预览中显示，或在浏览器或生成 PDF 等文档浏览，不会修改你的 markdown 文件。并且可以点击预览窗口中的侧边栏目录列表图标，打开侧边栏目录。如下图。

需要特别注意:必须是以 MPE 插件的 Markdown 预览功能，而不是打开 VSCode 自有的 Markdown 预览窗口。 VSCode 自有的 Markdown 预览不支持目录列表的显示。

2.2 各网站的用法差异和效果 ☰

1. 博客园网站编辑界面上，要求 [TOC] 必须独占一行。和 VSCode 的 MPE 插件功能类似，如下图：