VS CODE markdown 自动编号

相信大家都有这样的苦恼，写 md 的时候，不想自己手动编写标题序号，因为写了序号后有可能会修改或在中间插入新的标题，一改的话就要改很多，很不方便。

下面介绍如何在 vs code 中编写markdown, 且预览的时候自动给标题编号。

vscode 安装拓展 Markdown Preview Enhanced

Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。

Markdown Preview Enhanced

标题自动编号

要自定义 css，cmd-shift-p 然后运行 Markdown Preview Enhanced: Customize Css

style.less 文件将会被打开，然后你就可以开始编写样式了：

style.less 文件位于 ~/.mume/style.less

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

/**
 * 首先在父元素中（在这里是 body 元素），初始化你想要编号的最大标题的计数。
 */
body {
  counter-reset: hbody;
}
  
/**
 * 然后父标题初始化子标题的计数，下面以此类推。
 */
h1 {
  counter-reset: h1;
}

h2 {
  counter-reset: h2;
}

h3 {
  counter-reset: h3;
}

h4 {
  counter-reset: h4;
}

h5 {
  counter-reset: h5;
}

  
/**
 * 接着在每个标题前面自动加上编号
 *
 * 如果不想从 h1 开始自动编号，而是把 h1 当成文章题目，从 h2 开始自动编号，那么
 * 1. 把 h1:before 注释
 * 2. 从 h2:before 开始到 h6:before，把编号开头的 counter(hbody) "." 这一部分删除
 */
h1:before {
  counter-increment: hbody;
  content: counter(hbody) ". ";
}
h2:before {
  counter-increment: h1;
  content: counter(hbody) "." counter(h1) ". ";
}

h3:before {
  counter-increment: h2;
  content: counter(hbody) "." counter(h1) "." counter(h2) ". ";
}

h4:before {
  counter-increment: h3;
  content: counter(hbody) "." counter(h1) "." counter(h2) "." counter(h3) ". ";
}

h5:before {
  counter-increment: h4;
  content: counter(hbody) "." counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

h6:before {
  counter-increment: h5;
  content: counter(hbody) "." counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
}

Markdown标题自动编号-从h1开始

Markdown标题自动编号-从h1开始.png

Markdown标题自动编号-从h2开始

Markdown标题自动编号-从h2开始.png