各位朋友大家好,最近开始使用思源笔记,非常喜欢思源笔记的各种功能。
最近想设置笔记中的章节进行自动编号,查了一些资料,发现修改 CSS 文件就可以实现。
尝试之后发现在正文和 Table of Content 中都可以正确显示编号,但是在左侧的大纲视图中没法正确进行编号。最终发现问题是左侧大纲视图的 HTML 格式并不是标准的嵌套格式,所以无法正确进行章节的自动嵌套编号。
如何才能向开发者反馈这个问题呢?
实现章节自动嵌套编号的效果和 CSS 代码分别如下:
/*正文编号*/
.vditor-ir {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
.vditor-ir h1:before {
counter-increment: h1;
content: counter(h1) " "
}
.vditor-ir h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) " "
}
.vditor-ir h3:before{
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) " "
}
.vditor-ir h4:before{
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}
.vditor-ir h5:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}
.vditor-ir h6:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}
/*TOC编号*/
.vditor-toc ul {
counter-reset: counter;
}
.vditor-toc li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
/*左侧大纲编号*/
.vditor-reset.fn__flex-1 ul {
counter-reset: counter;
}
.vditor-reset.fn__flex-1 li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于