Markdown实现标题添加序号

MarkDown标题自动添加编号

参考:https://markdown.com.cn/basic-syntax/
MarkDown标题自动添加编号 | yanwei.github.io

1. {"Author":"yanwei", "LastUpdate":"2017-11-07"}

复制代码

问题描述

我们都知道，MarkDown可以通过######等标记添加不同层次的标题，非常方便。但是问题来了：怎样给标题加上编号呢？
像如许：

1. # Title
2. ## 1. sub-title
3. ### 1.1 sub-sub-title
4. ### 1.2 sub-sub-title
5. ## 2. sub-title
6. ## 3. sub-title

复制代码

为了给标题加上编号，手动加上11.11.223，很麻烦有没有？如果插入或删除章节，后面的编号都要重新修改一遍。。。
解决方法

实在，MarkDown是可以直接支持CSS的。在md文件中参加CSS代码，即可给章节自动加上编号。

1. <style type="text/css">
2.     h1 { counter-reset: h2counter; }
3.     h2 { counter-reset: h3counter; }
4.     h3 { counter-reset: h4counter; }
5.     h4 { counter-reset: h5counter; }
6.     h5 { counter-reset: h6counter; }
7.     h6 { }
8.     h2:before {
9.       counter-increment: h2counter;
10.       content: counter(h2counter) ".\0000a0\0000a0";
11.     }
12.     h3:before {
13.       counter-increment: h3counter;
14.       content: counter(h2counter) "."
15.                 counter(h3counter) ".\0000a0\0000a0";
16.     }
17.     h4:before {
18.       counter-increment: h4counter;
19.       content: counter(h2counter) "."
20.                 counter(h3counter) "."
21.                 counter(h4counter) ".\0000a0\0000a0";
22.     }
23.     h5:before {
24.       counter-increment: h5counter;
25.       content: counter(h2counter) "."
26.                 counter(h3counter) "."
27.                 counter(h4counter) "."
28.                 counter(h5counter) ".\0000a0\0000a0";
29.     }
30.     h6:before {
31.       counter-increment: h6counter;
32.       content: counter(h2counter) "."
33.                 counter(h3counter) "."
34.                 counter(h4counter) "."
35.                 counter(h5counter) "."
36.                 counter(h6counter) ".\0000a0\0000a0";
37.     }
38. </style>

复制代码

进一步优化

每个MarkDown文件中都要加上上面这段CSS，还是有点麻烦。幸好，MarkDown也支持外部样式表。
把上面的代码保存到一个独立的CSS文件中（去掉头尾的style标签），文件定名为auto-number-title.css

1. h1 { counter-reset: h2counter; }
2. h2 { counter-reset: h3counter; }
3. h3 { counter-reset: h4counter; }
4. h4 { counter-reset: h5counter; }
5. h5 { counter-reset: h6counter; }
6. h6 { }
7. h2:before {
8.   counter-increment: h2counter;
9.   content: counter(h2counter) ".\0000a0\0000a0";
10. }
11. h3:before {
12.   counter-increment: h3counter;
13.   content: counter(h2counter) "."
14.             counter(h3counter) ".\0000a0\0000a0";
15. }
16. h4:before {
17.   counter-increment: h4counter;
18.   content: counter(h2counter) "."
19.             counter(h3counter) "."
20.             counter(h4counter) ".\0000a0\0000a0";
21. }
22. h5:before {
23.   counter-increment: h5counter;
24.   content: counter(h2counter) "."
25.             counter(h3counter) "."
26.             counter(h4counter) "."
27.             counter(h5counter) ".\0000a0\0000a0";
28. }
29. h6:before {
30.   counter-increment: h6counter;
31.   content: counter(h2counter) "."
32.             counter(h3counter) "."
33.             counter(h4counter) "."
34.             counter(h5counter) "."
35.             counter(h6counter) ".\0000a0\0000a0";
36. }

复制代码

接下来只要在md文件中加上引用外部样式表的代码就可以啦：

1. <link rel="stylesheet" type="text/css" href="auto-number-title.css" />

复制代码

是不是很方便呢？
增补阐明

为了能用本文的方法实现标题自动编号，文章必须有主标题，且必须是一级标题“#”，然后在正文中依次使用二级、三级标题等。自动编号是从二级标题开始的。一级标题是主标题，只应该有一个，也不应加上编号。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。