在Typora中实现自动编号

news2025/1/6 16:03:33

文章目录

      • 在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.coloradmin.cn/o/2270949.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微机——计算机中的数制

微机——计算机中的数制

目录 数制转换： 十进制数转为非十进制数： 二、八、十六进制数之间的转换： 数及字符的表示： 二进制数的加减运算： 无符号数的运算： 带符号数运算中的溢出问题： 计算机中常用的编码&#…
阅读更多...
设计心得——流程图和数据流图绘制

设计心得——流程图和数据流图绘制

一、流程图和数据流图 在软件开发中，画流程图和数据流图可以说是几乎每个人都会遇到。 1、数据流（程）图 Data Flow Diagram，DFG。它可以称为数据流图或数据流程图。其主要用来描述系统中数据流程的一种图形工具，可以将…
阅读更多...
Node 如何生成 RSA 公钥私钥对

Node 如何生成 RSA 公钥私钥对

一、引入crypto模块 crypto 为node 自带模块，无需安装 const crypto require(crypto);二、封装生成方法 async function generateRSAKeyPair() {return new Promise((resolve, reject) > {crypto.generateKeyPair(rsa, {modulusLength: 2048, // 密钥长度为 …
阅读更多...
壁纸样机神器，可以导出高清图片吗？

壁纸样机神器，可以导出高清图片吗？

壁纸样机神器确实支持导出高清图片。根据搜索结果中的信息，壁纸样机神器提供了以下功能： 壁纸样机神器免费体验 高清壁纸上传：壁纸样机神器支持上传您自己的壁纸图片，推荐尺寸为1290 2796（9:19.5）&#xf…
阅读更多...
数据挖掘——神经网络分类

数据挖掘——神经网络分类

神经网络分类 神经网络分类人工神经网络多层人工神经网络 误差反向传播（BP）网络后向传播算法 神经网络分类 人工神经网络 人工神经网络主要由大量的神经元以及它们之间的有向连接构成。包含三个方面： 神经元的激活规则 主要是指神经元输入…
阅读更多...
快速上手LangChain（三）构建检索增强生成（RAG）应用

快速上手LangChain（三）构建检索增强生成（RAG）应用

文章目录 快速上手LangChain（三）构建检索增强生成（RAG）应用概述索引阿里嵌入模型 Embedding检索和生成RAG应用（demo：根据我的博客主页，分析一下我的技术栈）快速上手LangChain（三）构建检索增强生成（RAG）应用 langchain官方文档：https://python.langchain.ac.cn/do…
阅读更多...
Json字符串解析失败

Json字符串解析失败

通过第三方服务，拿到响应体的data对象（拿到的时候对象是有值的） 通过JSON.parseObject方法，拿到的对象，值为null 通过查看对应的json字符串，发现命名不一样... JSONField SeriealizedName注解是用来解析j…
阅读更多...
网络安全 | 信息安全管理体系（ISMS）认证与实施

网络安全 | 信息安全管理体系（ISMS）认证与实施

网络安全 | 信息安全管理体系（ISMS）认证与实施 一、前言二、信息安全管理体系（ISMS）概述2.1 ISMS 的定义与内涵2.2 ISMS 的核心标准 ——ISO/IEC 27001 三、信息安全管理体系（ISMS）认证3.1 认证的意义与价值…
阅读更多...
《黄药师》药业管理软件 UploadFile 文件上传致RCE漏洞复现

《黄药师》药业管理软件 UploadFile 文件上传致RCE漏洞复现

0x01 产品简介 《黄药师》药业管理软件是一款针对我国医药或医疗器械企业经营管理特点而设计的综合管理软件。《黄药师》系列管理软件集进销存、财务、经营分析和GSP管理为一体，从企业经营的各个环节对资金流、物流、信息流等进行系统的管理。它采用“一看就懂，一学就会，一…
阅读更多...
电子应用设计方案84：智能 AI 煤气灶系统设计

电子应用设计方案84：智能 AI 煤气灶系统设计

智能 AI 煤气灶系统设计 一、引言 智能 AI 煤气灶系统旨在提供更安全、便捷和高效的烹饪体验，结合人工智能技术实现智能化的控制和管理。 二、系统概述 1. 系统目标 - 精确控制火力大小，实现精准烹饪。 - 具备智能防干烧和熄火保护功能，确保…
阅读更多...
带虚继承的类对象模型

带虚继承的类对象模型

文章目录 1、代码2、 单个虚继承3、vbptr是什么4、虚继承的多继承 1、代码 #include<iostream> using namespace std;class Base { public:int ma; };class Derive1 :virtual public Base { public:int mb; };class Derive2 :public Base { public:int mc; };class Deri…
阅读更多...
python +tkinter绘制彩虹和云朵

python +tkinter绘制彩虹和云朵

python tkinter绘制彩虹和云朵 彩虹&#xff0c;简称虹&#xff0c;是气象中的一种光学现象&#xff0c;当太阳光照射到半空中的水滴&#xff0c;光线被折射及反射&#xff0c;在天空上形成拱形的七彩光谱&#xff0c;由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…
阅读更多...
学习随想：高维AI数据的训练和推理与一维数据的排序和查找

学习随想：高维AI数据的训练和推理与一维数据的排序和查找

以下是看Attention Is All You Need这篇文章的一点随想。 说实话&#xff0c;我没看懂transformer是咋回事&#xff0c;但突然一个类比念头&#xff0c;让我感觉有点概念了&#xff0c;虽然所有的类比都是不完备的。 学习随想记录如下&#xff0c;仅供查考&#xff1a; 物理世…
阅读更多...
vue 处理二进制文件流下载，封装请求

vue 处理二进制文件流下载，封装请求

后端返回的文件流 前端需要处理成下载文件 刚开始一直报错 处理的方法 // http.js import instance from ./axios;export const get (url, params {}, config {}) > instance.get(url, { params, ...config });// api.js /*** 获取下载错误信息* param {string} batchI…
阅读更多...
LeetCode 热题 100_将有序数组转换为二叉搜索树（42_108_简单_C++）(二叉树；递归)

LeetCode 热题 100_将有序数组转换为二叉搜索树（42_108_简单_C++）(二叉树；递归)

LeetCode 热题 100_将有序数组转换为二叉搜索树&#xff08;42_108&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;递归&#xff09;&#xff1a; 代码实现代码实现&#xff08;递归&#xff09;&#xff1…
阅读更多...
Elasticsearch：利用 AutoOps 检测长时间运行的搜索查询

Elasticsearch：利用 AutoOps 检测长时间运行的搜索查询

作者&#xff1a;来自 Elastic Valentin Crettaz 了解 AutoOps 如何帮助你调查困扰集群的长期搜索查询以提高搜索性能。 AutoOps 于 11 月初在 Elastic Cloud Hosted 上发布&#xff0c;它通过性能建议、资源利用率和成本洞察、实时问题检测和解决路径显著简化了集群管理。 Au…
阅读更多...
Unity2022接入Google广告与支付SDK、导出工程到Android Studio使用JDK17进行打包完整流程与过程中的相关错误及处理经验总结

Unity2022接入Google广告与支付SDK、导出工程到Android Studio使用JDK17进行打包完整流程与过程中的相关错误及处理经验总结

注&#xff1a;因为本人也是第一次接入广告与支付SDK相关的操作&#xff0c;网上也查了很多教程&#xff0c;很多也都是只言片语或者缺少一些关键步骤的说明&#xff0c;导致本人也是花了很多时间与精力踩了很多的坑才搞定&#xff0c;发出来也是希望能帮助到其他人在遇到相似问…
阅读更多...
Spring实现Logback日志模板设置动态参数

Spring实现Logback日志模板设置动态参数

版权说明&#xff1a; 本文由博主keep丶原创&#xff0c;转载请保留此块内容在文首。 原文地址&#xff1a; https://blog.csdn.net/qq_38688267/article/details/144842327 文章目录 背景设计日志格式实现配置动态取值logback-spring.xml 相关博客 背景 多个单体服务间存在少量…
阅读更多...
element-ui dialog 组件源码分享

element-ui dialog 组件源码分享

简单分享 dialog 组件源码&#xff0c;主要从以下三个方面&#xff1a; 1、dialog 页面结构。 2、dialog 组件属性。 3、dialog 组件挂载。 4、dialog 组件事件。 一、dialog 页面结构&#xff1a; 二、组件属性&#xff1a; 2.1 visible 是否显示 Dialog&#xff0c;支持…
阅读更多...
Vue3 组件之插槽

Vue3 组件之插槽

文章目录 Vue3 组件之插槽概述默认插槽具名插槽默认内容插槽没有提供内容有提供内容 作用域插槽简单使用使用解构形式 Vue3 组件之插槽 概述 插槽专门用于父组件向子组件传递标签结构。在使用时&#xff0c;一般会在子组件中通过slot来声明占位&#xff0c;在父组件中&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023