在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的强大功能。
相关文章:

在Typora中实现自动编号
文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录(TOC)自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号 1. 引言 Typora是一款非常流行的Markdown编辑…...

Single Shot MultiBox Detector(SSD)
文章目录 摘要Abstract1. 引言2. 框架2.1 网络结构2.2 损失函数2.3 训练细节 3. 创新点和不足3.1 创新点3.2 不足 参考总结 摘要 与Faster R-CNN相比,SSD是一个真正的单阶段多目标检测模型,同时也是一个全卷积网络,不仅检测准确率高ÿ…...

kafka生产者专题(原理+拦截器+序列化+分区+数据可靠+数据去重+事务)
目录 生产者发送数据原理参数说明代码示例(同步发送数据)代码示例(异步) 异步和同步的区别同步发送定义与流程特点 异步发送定义与流程特点 异步回调描述代码示例 拦截器描述代码示例 消息序列化描述代码示例(自定义序…...

【React+TypeScript+DeepSeek】穿越时空对话机
引言 在这个数字化的时代,历史学习常常给人一种距离感。教科书中的历史人物似乎永远停留在文字里,我们无法真正理解他们的思想和智慧。如何让这些伟大的历史人物"活"起来?如何让历史学习变得生动有趣?带着这些思考&…...

公共数据授权运营系统建设手册(附下载)
在全球范围内,许多国家和地区已经开始探索公共数据授权运营的路径和模式。通过建立公共数据平台,推动数据的开放共享,促进数据的创新应用,不仅能够提高政府决策的科学性和公共服务的效率,还能够激发市场活力࿰…...

基于HTML和CSS的旅游小程序
一、技术基础 HTML(HyperText Markup Language):超文本标记语言,用于定义网页的内容和结构。在旅游小程序中,HTML用于搭建页面的基本框架,包括标题、段落、图片、链接等元素,以及用于交互的表单…...

maven之插件调试
当使用maven进行项目管理的时候,可能会碰到一些疑难问题。网上资料很少,可能会想着直接调试定位问题。这里以maven-compiler-plugin为例: (1)准备maven-compiler-plugin源码 进入maven 官网-》Maven Plugins-》找到对…...
SQL Sever 数据库损坏,只有.mdf文件,如何恢复?
SQL Sever 数据库损坏,只有.mdf文件,如何恢复 在SQL Server 2008中,如果只有MDF文件而没有LDF文件,附加数据库的过程会稍微复杂一些。以下是几种可能的方法 一、使用紧急模式重建日志文件 1、新建一个同名的数据库。 2、停止SQ…...

【AWS SDK PHP】This operation requests `sigv4a` auth schemes 问题处理
使用AWS SDK碰到的错误,其实很简单,要装个扩展库 保持如下 Fatal error: Uncaught Aws\Auth\Exception\UnresolvedAuthSchemeException: This operation requests sigv4a auth schemes, but the client currently supports sigv4, none, bearer, sigv4-…...

primevue的<Menu>组件
1.使用场景 2.代码 1.给你的menu组件起个引用名 2.<Menu>组件需要一个MenuItem[] 3.你要知道MenuItem[ ]的特殊的数据格式,就像TreeNode[ ]一样,数据格式不对是不渲染的。。。。 常用的属性就这几种,js语言和java不一样,J…...

利用Deeplearning4j进行 图像识别
目录 图像识别简介 神经网络 感知器 前馈神经网络 自动编码器 受限玻尔兹曼机 深度卷积网络 理解图像内容以及图像含义方面,计算机遇到了很大困难。本章先介绍计算机理解图像教育方面 遇到的难题,接着重点讲解一个基于深度学习的解决方法。我们会…...
练习题:37
目录 Python题目 题目 题目分析 套接字概念剖析 通信原理分析 服务器 - 客户端连接建立过程: 基于套接字通信的底层机制: 代码实现 基于 TCP 的简单服务器 - 客户端通信示例 服务器端代码(tcp_server.py) 客户端代码&a…...
Unity热更文件比较工具类
打包出来的热更文件,如果每次都要全部上传到CDN文件服务器,不进耗费时间长,还浪费流量。 所以让AI写了个简单的文件比较工具类,然后修改了一下可用。记录一下。 路径可自行更改。校验算法这里使用的是MD5,如果使用SH…...

【hustoj注意事项】函数返回值问题
原文 https://lg.h-fmc.cn/index.php/BC/27.html 问题回顾 此题目选自HFMC_OJ:4312: 简单递归操作 hustoj测试 此问题错误的代码是 #include<bits/stdc.h> using namespace std; int a[10000];int n; int b[10000]{0}; int pailie(int deep) {int i; for(…...

实现一个通用的树形结构构建工具
文章目录 1. 前言2. 树结构3. 具体实现逻辑3.1 TreeNode3.2 TreeUtils3.3 例子 4. 小结 1. 前言 树结构的生成在项目中应该都比较常见,比如部门结构树的生成,目录结构树的生成,但是大家有没有想过,如果在一个项目中有多个树结构&…...

数势科技:解锁数据分析 Agent 的智能密码(14/30)
一、数势科技引领数据分析变革 在当今数字化浪潮中,数据已然成为企业的核心资产,而数据分析则是挖掘这一资产价值的关键钥匙。数势科技,作为数据智能领域的领军者,以其前沿的技术与创新的产品,为企业开启了高效数据分析…...

机器学习之过采样和下采样调整不均衡样本的逻辑回归模型
过采样和下采样调整不均衡样本的逻辑回归模型 目录 过采样和下采样调整不均衡样本的逻辑回归模型1 过采样1.1 样本不均衡1.2 概念1.3 图片理解1.4 SMOTE算法1.5 算法导入1.6 函数及格式1.7 样本类别可视化理解 2 下采样2.1 概念2.2 图片理解2.3 数据处理理解2.4 样本类别可视化…...

解决 ssh connect to host github.com port 22 Connection timed out
一、问题描述 本地 pull/push 推送代码到 github 项目报 22 端口连接超时,测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的,因此可以强制将端口切换为 443 二、解决方案 1、测试连接 ssh -T gitgithub.com意味着无法通…...

mybatis/mybatis-plus中mysql报错
文章目录 一、sql执行正常,mybatis报错二、sql执行正常,mybatis-plus报错直接改变字段利用mybatis-plus特性处理 总结 一、sql执行正常,mybatis报错 Caused by: net.sf.jsqlparser.parser.ParseException: Encountered unexpected token: "ur" <K_ISOLATION>a…...
在ros2 jazzy和gazebo harmonic下的建图导航(cartographer和navigation)实现(基本)
我的github分支!!! 你可以在这里找到相对应的源码。 DWDROME的MOGI分支 来源于!! MOGI-ROS/Week-3-4-Gazebo-basics 学习分支整理日志 分支概述 这是一个用于个人学习的新分支,目的是扩展基本模型并添加…...

大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...

GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...

AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...

三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)
题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...