在Typora中实现自动编号

凳子花❀2025-01-04 21:32

文章目录

      • 在Typora中实现自动编号
        • [1. 引言](#1. 引言)
        • [2. 准备工作](#2. 准备工作)
        • [3. 自动编号的实现](#3. 自动编号的实现)
          • [3.1 文章大纲自动编号](#3.1 文章大纲自动编号)
          • [3.2 主题目录（TOC）自动编号](#3.2 主题目录（TOC）自动编号)
          • [3.3 文章内容自动编号](#3.3 文章内容自动编号)
          • [3.4 完整代码](#3.4 完整代码)
        • [4. 应用自定义CSS](#4. 应用自定义CSS)
        • [5. 结论](#5. 结论)

在Typora中实现自动编号

1. 引言

Typora是一款非常流行的Markdown编辑器，以其简洁直观的界面而闻名。尽管它默认不提供对标题自动编号的支持，但通过自定义CSS，我们可以轻松地为我们的文档添加这一功能。本篇文章将展示如何设置自动编号，使得文章结构更加清晰，有助于读者快速定位到感兴趣的部分。

2. 准备工作

在开始之前，请确保您已经下载并安装了Typora。此外，您还需要了解一些基本的CSS知识，因为我们将通过自定义CSS来实现自动编号。为了使这些样式生效，您需要确保Typora启用了"使用自定义CSS"选项，并且您的CSS文件正确加载。

3. 自动编号的实现
3.1 文章大纲自动编号

首先，我们需要为文章的大纲添加自动编号。这可以通过以下完整的CSS代码片段来完成：

css 复制代码 
/*文章大纲自动编号*/
.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) " ";
}

这段代码会为每个标题级别创建一个计数器，并在每个标题前显示相应的编号。

3.2 主题目录（TOC）自动编号

接下来，我们为生成的主题目录添加自动编号。这是通过以下完整的CSS规则实现的：

css 复制代码 
/*文章主题目录自动编号*/
/* 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;
}

此段代码同样为TOC中的每个标题设置了计数器，并在每个条目前添加了编号。

3.3 文章内容自动编号

最后，我们希望正文中的标题也能够自动编号。下面的完整CSS代码可以满足这个需求：

css 复制代码 
/*文章内容自动编号*/
/** 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;
}

这些规则确保了正文中的标题也会按照大纲顺序进行编号。

3.4 完整代码
css 复制代码 
/*文章大纲自动编号*/
.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) " "
}


/*文章主题目录自动编号*/
/* 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;
} 


/*文章内容自动编号*/
/** 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;
}
4. 应用自定义CSS

要应用上述CSS代码，您需要将其保存为.css文件。具体步骤如下：

  • 打开Typora。
  • 前往文件 > 偏好设置 > 外观。
  • 点击主题里面的打开主题文件夹按钮。
  • 打开之后，新建文件：base.user.css，将上述代码复制进去，保存退出。

完成以上设置后，重新打开或新建文档时，您应该可以看到标题已经自动编号了。

5. 结论

通过简单的自定义CSS，我们可以在Typora中为文章大纲、主题目录和正文内容添加自动编号，从而提高文档的专业性和可读性。如果您经常撰写技术文档或学术论文，这项功能将极大地提升您的写作效率。希望这篇文章能帮助您更好地利用Typora的强大功能。

相关推荐
程序媛-徐师姐5 天前
Typora 最新版本下载安装教程（附详细图文）
typora·typora下载安装·typora安装教程·typora最新版本下载·typora安装下载
Across7771 个月前
typora 画流程图、时序图(顺序图)
流程图·typora·markdown
理竹子2 个月前
Typora导出pdf手动分页和设置字体样式
pdf·typora·markdown
按不出色风格2 个月前
如何在Typora中使用copilot
copilot·typora
一个很帅的帅哥2 个月前
Mac在Typora配置PicGo图床,以github为例
macos·gitee·github·typora·mac·图床
少爷晚安。2 个月前
Typora一款极简Markdown文档编辑器和阅读器，实时预览，序列号生成！免费！最新可用！
typora·激活
Li_0304062 个月前
Typora的使用方法（个人学习笔记）
笔记·学习·typora
安冬的码畜日常3 个月前
【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段
编辑器·html·typora·sublime text·代码片段·snippet
程序员-杨胡广4 个月前
最强神器Typora 2024（亲测有效）| Markdown 工具推荐
typora·markdown·最强神器
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)03HCIA-datacom数通题库和录播视频资料04AI视频玩法：动物融合技术解析05渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了06校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站07如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09玄机平台应急响应—webshell查杀10mysql部署(5.7.31)