typroa自定义css样式实现标题自动排序
目录
问题痛点
用Typora写长文档时，最烦的就是标题排序——每次插入或删除一个标题，后面的序号都要手动改一遍，上次写文章时改到头晕。
后来研究了CSS自定义样式，终于实现了标题自动排序，不管怎么调整结构，序号都能自动刷新。
这篇就把从基础实现到样式优化的全流程分享出来。适用一下困扰场景：
✅ 手动添加「1.1、1.2.3」编号效率低下？
✅ 调整章节顺序导致编号错乱？
✅ 无法实现「第一章、第一节」中文编号？
本文将用自定义CSS代码彻底解决这些问题！
一、基础版：自动生成多级数字编号
（一）找到Typora的自定义CSS文件
首先要找到Typora的主题样式目录，不同系统路径不一样，这里分两种情况：
- Windows系统：打开Typora，点击“文件→偏好设置→外观→主题→打开主题文件夹”，会弹出一个存放主题CSS的文件夹；
- Mac系统：打开Typora，点击“Typora→设置→外观→主题→打开主题文件夹”，同样会弹出主题目录
打开typora-设置-外观-找到主题文件夹
（二）、创建自定义CSS文件
在Typora主题目录（打开typora-设置-外观-找到主题文件夹）新建 auto-number.css，添加以下代码：
/** initialize css counter */
#write {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
/** put counter result into headings */
/* #write h1:before {
counter-increment: h1;
content: counter(h1) ". "
} */
#write h2:before {
counter-increment: h2;
content: counter(h2)"."
}
#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
counter-increment: h3;
content: counter(h1)"."counter(h2)"."counter(h3)"."
}
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: h4;
content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"."
}
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: h5;
content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."
}
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: h6;
content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."counter(h6)"."
}
/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left:initial;
float: none;
top:initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}添加完成后，保存CSS文件，然后重启Typora（必须重启才能生效）。
此时新建文档输入h1到h4标题，就能看到自动生成的序号了，插入或删除标题时，序号会自动更新。
新建一个 markdown 文档试验一下，只需要填写章节名，就会自动在章节名前添加序号
二、进阶技巧：满足特殊需求
如果你有特殊的编号需求，比如序号要是中文的，第一节…..之类
h1::before {
content: "第" counter(h1, cjk-ideographic) "章 ";
}
h2::before {
content: "第" counter(h2, cjk-ideographic) "节 ";
}只需要修改 h:before{} 渲染的样式即可
可以根据自己的喜好调整颜色、padding、边框等参数，比如一级标题用深色背景，二级用浅色，区分更明显。
版权声明
未经授权，禁止转载本文章。
如需转载请保留原文链接并注明出处。即视为默认获得授权。
未保留原文链接未注明出处或删除链接将视为侵权，必追究法律责任！