你是否在为手动给Typora增加标题序号或大纲序号而苦恼?这不仅增加了我们的工作量,并且也给后期文档维护带来了巨大的困难。当我了解到这个软件是用浏览器实现之时,就利用css的计数器实现了自动显示标题序号功能。

大纲显示序号

Snipaste_2021-12-20_20-59-05.png

用法

将代码粘贴到Typora安装目录下述文件末尾
Typora\resources\style\windows.css

显示h1-h6完整版

点击查看代码

.outline-content{
    counter-reset: outline-h1
}
.outline-item-wrapper.outline-h1{
    counter-reset: outline-h2
}
.outline-item-wrapper.outline-h2{
    counter-reset: outline-h3
}
.outline-item-wrapper.outline-h3{
    counter-reset: outline-h4
}
.outline-item-wrapper.outline-h4{
    counter-reset: outline-h5
}
.outline-item-wrapper.outline-h5{
    counter-reset: outline-h6
}
.outline-item-wrapper.outline-h1>.outline-item>.outline-label:before{
    counter-increment: outline-h1;
    content: counter(outline-h1) ". "
}
.outline-item-wrapper.outline-h2>.outline-item>.outline-label:before {
    counter-increment: outline-h2;
    content: counter(outline-h1) "." counter(outline-h2) " "
}
.outline-item-wrapper.outline-h3>.outline-item>.outline-label:before {
    counter-increment: outline-h3;
    content: counter(outline-h1) "." counter(outline-h2) "." counter(outline-h3) " "
}
.outline-item-wrapper.outline-h4>.outline-item>.outline-label:before {
    counter-increment: outline-h4;
    content: counter(outline-h1) "." counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4) " "
}
.outline-item-wrapper.outline-h5>.outline-item>.outline-label:before {
    counter-increment: outline-h5;
    content: counter(outline-h1) "." counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4) "." counter(outline-h5) " "
}
.outline-item-wrapper.outline-h6>.outline-item>.outline-label:before {
    counter-increment: outline-h6;
    content: counter(outline-h1) "." counter(outline-h2) "." counter(outline-h3) "." counter(outline-h4) "." counter(outline-h5) "." counter(outline-h6)" "
}

省略主标题与h4,h5,h6实用版

点击查看代码

.outline-item-wrapper.outline-h1{
    counter-reset: outline-h1
}
.outline-item-wrapper.outline-h2{
    counter-reset: outline-h2
}
.outline-item-wrapper.outline-h3{
    counter-reset: outline-h3
}
.outline-item-wrapper.outline-h2>.outline-item>.outline-label:before{
    counter-increment: outline-h1;
    content: counter(outline-h1) ". "
}
.outline-item-wrapper.outline-h3>.outline-item>.outline-label:before {
    counter-increment: outline-h2;
    content: counter(outline-h1) "." counter(outline-h2) " "
}
.outline-item-wrapper.outline-h4>.outline-item>.outline-label:before {
    counter-increment: outline-h3;
    content: counter(outline-h1) "." counter(outline-h2) "." counter(outline-h3) " "
}

标题显示序号

Snipaste_2021-12-20_20-59-22.png

用法

将代码粘贴到Typora主题css文件末尾。(如果找不到该css文件的同学自行百度)

显示h1-h6完整版

点击查看代码

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

省略主标题与h4,h5,h6实用版

点击查看代码

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

补充

后来发现官方其实有这个功能的指导的。http://support.typora.io/Auto-Numbering

最后修改:2021 年 12 月 20 日 10 : 12 PM