给为知笔记的markdown样式设置标题自动添加编号

给为知笔记的markdown样式设置标题自动编号

注意：本文可能会过期失效。

由于为知笔记的markdown样式原本没有为标题自动设置编号，因此我到网上找到了相关的设置方法。

找到markdown笔记样式的设置文件

也就是一个css文件，可以去为知笔记官网常见问题处（我的是Windows版，当时的地址是：https://www.wiz.cn/zh-cn/change_markdown_style.html）找到该文件的位置。

修改样式

按照指示，先备份github2.css文件。然后打开该文件，在文末添加以下css代码。

/* 首先在父元素中（在这里是类markdown-body的元素），初始化你想要编号的最大标题的计数。我喜欢从h2开始编号，所以我就写h2，你也可以写h1。 */
.markdown-body {
    counter-reset: h2;
}
/* 然后父标题初始化子标题的计数，下面以此类推。 */
h2 {
    counter-reset: h3;
}
h3 {
    counter-reset: h4;
}
h4 {
    counter-reset: h5;
}
h5 {
    counter-reset: h6;
}
/* 接着在每个标题前面自动加上编号 */
h2:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}
h3:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}
h4:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
h5:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
h6:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

上述css代码的详细解释可以参考下面的参考资料。效果如下图：

注意事项

值得注意是，counter，counter-increment，counter-reset的使用方法。counter-reset一定要在父元素中使用，然后在子元素中使用counter，counter-increment。否则可能会遇到“counter不起作用“的问题。

参考资料

1. Typora设置标题自动添加序号—简书
2. counter-reset—MDN web docs
3. CSS counter-reset 属性—W3school
4. CSS伪元素（content与counter）—segmentfault