ToB企服应用市场:ToB评测及商务社交产业平台

标题: Markdown实现标题添加序号 [打印本页]
作者: 花瓣小跑    时间: 2024-10-11 03:18
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4