你是否在为手动给Typora增加标题序号或大纲序号而苦恼？这不仅增加了我们的工作量，并且也给后期文档维护带来了巨大的困难。
当我了解到这个软件是用浏览器实现之时，就尝试利用css的计数器实现了标题，大纲，目录自动编号。
Typora小知识
Typora主题文件夹默认位置C:\Users\你的用户\AppData\Roaming\Typora\themes
Typora加载CSS文件顺序
- Typora基本样式
- 当前主题样式
base.user.css(主题文件夹中){current-theme}.user.css(主题文件夹中)
标题自动编号
在Typora主题文件夹中新建base.user.css，打开并填入其中一个代码版本。这样，你的所有样式都会加载这个配置。
完整版
#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)" "}简洁版
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) " "
}大纲自动编号
在Typora主题文件夹中新建base.user.css，打开并填入其中一个代码版本。
（或者将代码粘贴到Typora安装目录下述文件末尾Typora\resources\style\windows.css）
这样，你的所有样式都会加载这个配置。
完整版
.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)" "
}简洁版
.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) " "
}目录自动编号
在Typora主题文件夹中新建base.user.css，打开并填入其中代码。这样，你的所有样式都会加载这个配置。
完整版
.md-toc-content {
counter-reset: h1toc
}
.md-toc-h1 {
counter-reset: h2toc
}
.md-toc-h2 {
counter-reset: h3toc
}
.md-toc-h3 {
counter-reset: h4toc
}
.md-toc-h4 {
counter-reset: h5toc
}
.md-toc-h5 {
counter-reset: h6toc
}
.md-toc-h1:before {
counter-increment: h1toc;
content: counter(h1toc) ". "
}
.md-toc-h1 .md-toc-inner {
margin-left: 0;
}
.md-toc-h2:before {
counter-increment: h2toc;
content:counter(h1toc) ". " counter(h2toc)
}
.md-toc-h2 .md-toc-inner {
margin-left: 0;
}
.md-toc-h3:before {
counter-increment: h3toc;
content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc)
}
.md-toc-h3 .md-toc-inner {
margin-left: 0;
}
.md-toc-h4:before {
counter-increment: h4toc;
content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc)
}
.md-toc-h4 .md-toc-inner {
margin-left: 0;
}
.md-toc-h5:before {
counter-increment: h5toc;
content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc)
}
.md-toc-h5 .md-toc-inner {
margin-left: 0;
}
.md-toc-h6:before {
counter-increment: h6toc;
content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc)
}
.md-toc-h6 .md-toc-inner {
margin-left: 0;
}一键配置
如果你想快速配置标题，大纲，目录自动编号，则在Typora主题文件夹中新建base.user.css，打开并填入推荐的代码并保存即可。
.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) " "
}
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) " "
}
.md-toc-h1 {
counter-reset: h1toc
}
.md-toc-h2 {
counter-reset: h2toc
}
.md-toc-h3 {
counter-reset: h3toc
}
.md-toc-h4 {
counter-reset: h4toc
}
.md-toc-h5 {
counter-reset: h5toc
}
.md-toc-h2:before {
counter-increment: h1toc;
content: counter(h1toc) ". "
}
.md-toc-h3:before {
counter-increment: h2toc;
content: counter(h1toc) "." counter(h2toc)
}
.md-toc-h4:before {
counter-increment: h3toc;
content: counter(h1toc) "." counter(h2toc) "." counter(h3toc)
}
.md-toc-h5:before {
counter-increment: h4toc;
content: counter(h1toc) "." counter(h2toc) "." counter(h3toc)"." counter(h4toc)
}
.md-toc-h6:before {
counter-increment: h5toc;
content: counter(h1toc) "." counter(h2toc) "." counter(h3toc)"." counter(h4toc)"." counter(h5toc)
}
.md-toc-h2 .md-toc-inner {
margin-left: 0;
}
.md-toc-h3 .md-toc-inner {
margin-left: 0;
}
.md-toc-h4 .md-toc-inner {
margin-left: 0;
}
.md-toc-h5 .md-toc-inner {
margin-left: 0;
}
.md-toc-h6 .md-toc-inner {
margin-left: 0;
}参考文章：