Typora自动编号的具体操作
作者:xnightmare 时间:2022-01-21 03:20:18
概述
在使用Typora写比较长的文章时,需要给章节编号,方便区分层次。如果手动编号,一旦章节顺序改变,很多章节的编号都需要一一手动修改,极其麻烦。
Typora官方提供了自动编号的方法:https://support.typora.io/Auto-Numbering/。本文将对官方提供的方法,以及简单改进进行介绍。
原理
这个方法的原理是,Typora基于浏览器开发(使用快捷键Shift+F12可以打开开发者工具)。因此,可以利用CSS实现自动编号。
具体操作
打开Typora -> 文件 -> 偏好设置 -> 外观 -> 打开主题文件夹。
在主题文件夹下新建文件
base.user.css
。将https://support.typora.io/Auto-Numbering/中提供的三份代码(分别实现文章内容自动编号、TOC自动编号、侧边栏大纲自动编号)复制到
base.user.css
中。重启Typora。
改进
官方提供的代码会对一级标题进行编号,但实际写文章时,一级标题往往是文章标题,无需编号,因此,我对代码进行了简单修改。下面是修改后的代码:
文章内容自动编号:
/** initialize css counter */
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 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(h2) "." counter(h3) ". "
}
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: h6;
content: 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;
}
TOC自动编号:
/* No link underlines in TOC */
.md-toc-inner {
text-decoration: none;
}
.md-toc-h1 {
margin-left: 0;
font-size: 1.5rem;
counter-reset: h2toc
}
.md-toc-h2 {
font-size: 1.1rem;
margin-left: 2rem;
counter-reset: h3toc
}
.md-toc-h3 {
margin-left: 3rem;
font-size: .9rem;
counter-reset: h4toc
}
.md-toc-h4 {
margin-left: 4rem;
font-size: .85rem;
counter-reset: h5toc
}
.md-toc-h5 {
margin-left: 5rem;
font-size: .8rem;
counter-reset: h6toc
}
.md-toc-h6 {
margin-left: 6rem;
font-size: .75rem;
}
.md-toc-h2:before {
color: black;
counter-increment: h2toc;
content: counter(h2toc) ". "
}
.md-toc-h2 .md-toc-inner {
margin-left: 0;
}
.md-toc-h3:before {
color: black;
counter-increment: h3toc;
content: counter(h2toc) ". " counter(h3toc) ". "
}
.md-toc-h3 .md-toc-inner {
margin-left: 0;
}
.md-toc-h4:before {
color: black;
counter-increment: h4toc;
content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". "
}
.md-toc-h4 .md-toc-inner {
margin-left: 0;
}
.md-toc-h5:before {
color: black;
counter-increment: h5toc;
content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". "
}
.md-toc-h5 .md-toc-inner {
margin-left: 0;
}
.md-toc-h6:before {
color: black;
counter-increment: h6toc;
content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) ". "
}
.md-toc-h6 .md-toc-inner {
margin-left: 0;
}
侧边栏大纲自动编号:
.outline-h1 {
counter-reset: h2
}
.outline-h2 {
counter-reset: h3
}
.outline-h3 {
counter-reset: h4
}
.outline-h4 {
counter-reset: h5
}
.outline-h5 {
counter-reset: h6
}
.outline-h2>.outline-item>.outline-label:before {
counter-increment: h2;
content: counter(h2) ". "
}
.outline-h3>.outline-item>.outline-label:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
.outline-h4>.outline-item>.outline-label:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
.outline-h5>.outline-item>.outline-label:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.outline-h6>.outline-item>.outline-label:before {
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
效果图
来源:https://blog.csdn.net/xnightmare/article/details/119854519
标签:Typora,自动编号
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2023-12-17 18:52:13
![](https://img.aspxhome.com/file/2023/7/125197_0s.jpg)
tornado 多进程模式解析
2021-01-20 10:56:44
pandas 使用merge实现百倍加速的操作
2022-06-11 08:22:28
![](https://img.aspxhome.com/file/2023/6/135316_0s.jpg)
PyQt5 closeEvent关闭事件退出提示框原理解析
2022-10-18 05:51:17
![](https://img.aspxhome.com/file/2023/1/92191_0s.png)
Python SQLAlchemy库的使用方法
2021-04-19 20:16:16
使用Keras 实现查看model weights .h5 文件的内容
2023-10-18 03:07:16
用Python编写一个简单的CS架构后门的方法
2021-08-07 00:15:58
![](https://img.aspxhome.com/file/2023/4/131584_0s.png)
python爬虫抓取时常见的小问题总结
2023-03-18 07:34:07
![](https://img.aspxhome.com/file/2023/1/109661_0s.webp)
Python利用pynimate实现制作动态排序图
2023-05-25 03:31:32
![](https://img.aspxhome.com/file/2023/4/88994_0s.gif)
Php中文件下载功能实现超详细流程分析
2023-10-07 17:09:13
![](https://img.aspxhome.com/file/2023/2/55762_0s.png)
详解Python如何轻松实现定时执行任务
2022-02-02 16:44:42
![](https://img.aspxhome.com/file/2023/5/88995_0s.png)
通过python-turtle库实现绘制图画
2023-11-23 17:39:35
![](https://img.aspxhome.com/file/2023/5/107595_0s.png)
python绘制散点图并标记序号的方法
2023-12-22 09:59:49
![](https://img.aspxhome.com/file/2023/7/115877_0s.jpg)
一文学会利用python解决文章付费限制问题
2021-04-09 08:23:51
![](https://img.aspxhome.com/file/2023/7/82537_0s.jpg)
PHP闭包定义与使用简单示例
2023-11-23 03:12:15
Dreamweaver基础技巧全面接触
2010-03-25 12:23:00
![](https://img.aspxhome.com/file/UploadPic/20071/2007131103144537s.gif)
Python配置pip国内镜像源的实现
2021-09-17 03:21:24
![](https://img.aspxhome.com/file/2023/0/124990_0s.png)
python如何发布自已pip项目的方法步骤
2023-01-22 01:17:36
python pandas时序处理相关功能详解
2023-07-25 12:03:18
ASP中Global.asa使用方法说明
2007-11-03 13:18:00