当前位置: 首页 > article >正文

在Typora中实现自动编号

文章目录

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

在Typora中实现自动编号

1. 引言

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

2. 准备工作

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

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

首先,我们需要为文章的大纲添加自动编号。这可以通过以下完整的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规则实现的:

/*文章主题目录自动编号*/
/* 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代码可以满足这个需求:

/*文章内容自动编号*/
/** 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 完整代码
/*文章大纲自动编号*/
.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的强大功能。


http://www.kler.cn/a/466864.html

相关文章:

  • Ae:合成设置 - 3D 渲染器
  • GESP202406 二级【计数】题解(AC)
  • SQL—Group_Concat函数用法详解
  • NLP初识
  • 形象地理解UE4中的数据结构 TLinkedListBase
  • 【MongoDB详解】
  • 「C++笔记」vector:C++中的新式“数组”
  • 新服务器Linux网络配置
  • vue+js+Java在分页的el-table里实现上移、下移;置顶
  • 计算机网络复习(学习通作业4、5、6系统答案)
  • 细说STM32F407单片机轮询方式CAN通信
  • 【读书笔记·VLSI电路设计方法解密】问题36:一个好的设计流程有哪些特点
  • C语言里面的size_t是什么意思
  • 云计算在医疗行业的应用
  • 设计模式中的代理模式
  • Node.js - 文件操作
  • C++例程:使用其I/O模拟IIC接扣(2)
  • 电脑更新后无法连接网络怎么解决 网络恢复方法
  • Transformer中Self-Attention以及Multi-Head Attention模块详解(附pytorch实现)
  • web漏洞之文件包含漏洞
  • [网络安全]DVWA之SQL注入—low level解题详析
  • Spring Boot自动装配代码详解
  • python +tkinter绘制彩虹和云朵
  • 2025年股指期货每月什么时候交割?
  • 探索光耦:光耦在风力发电中的应用——保障绿色能源的高效与安全
  • ubuntu16 重启之后lvm信息丢失故障恢复