在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 学习分支整理日志 分支概述 这是一个用于个人学习的新分支,目的是扩展基本模型并添加…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...

tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...

Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...