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

在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是一个真正的单阶段多目标检测模型,同时也是一个全卷积网络,不仅检测准确率高&#xff…...

kafka生产者专题(原理+拦截器+序列化+分区+数据可靠+数据去重+事务)

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

【React+TypeScript+DeepSeek】穿越时空对话机

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

公共数据授权运营系统建设手册(附下载)

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

基于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[ ]的特殊的数据格式&#xff0c;就像TreeNode[ ]一样&#xff0c;数据格式不对是不渲染的。。。。 常用的属性就这几种&#xff0c;js语言和java不一样&#xff0c;J…...

利用Deeplearning4j进行 图像识别

目录 图像识别简介 神经网络 感知器 前馈神经网络 自动编码器 受限玻尔兹曼机 深度卷积网络 理解图像内容以及图像含义方面&#xff0c;计算机遇到了很大困难。本章先介绍计算机理解图像教育方面 遇到的难题&#xff0c;接着重点讲解一个基于深度学习的解决方法。我们会…...

练习题:37

目录 Python题目 题目 题目分析 套接字概念剖析 通信原理分析 服务器 - 客户端连接建立过程&#xff1a; 基于套接字通信的底层机制&#xff1a; 代码实现 基于 TCP 的简单服务器 - 客户端通信示例 服务器端代码&#xff08;tcp_server.py&#xff09; 客户端代码&a…...

Unity热更文件比较工具类

打包出来的热更文件&#xff0c;如果每次都要全部上传到CDN文件服务器&#xff0c;不进耗费时间长&#xff0c;还浪费流量。 所以让AI写了个简单的文件比较工具类&#xff0c;然后修改了一下可用。记录一下。 路径可自行更改。校验算法这里使用的是MD5&#xff0c;如果使用SH…...

【hustoj注意事项】函数返回值问题

原文 https://lg.h-fmc.cn/index.php/BC/27.html 问题回顾 此题目选自HFMC_OJ&#xff1a;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. 前言 树结构的生成在项目中应该都比较常见&#xff0c;比如部门结构树的生成&#xff0c;目录结构树的生成&#xff0c;但是大家有没有想过&#xff0c;如果在一个项目中有多个树结构&…...

数势科技:解锁数据分析 Agent 的智能密码(14/30)

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

机器学习之过采样和下采样调整不均衡样本的逻辑回归模型

过采样和下采样调整不均衡样本的逻辑回归模型 目录 过采样和下采样调整不均衡样本的逻辑回归模型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 端口连接超时&#xff0c;测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的&#xff0c;因此可以强制将端口切换为 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分支&#xff01;&#xff01;&#xff01; 你可以在这里找到相对应的源码。 DWDROME的MOGI分支 来源于&#xff01;&#xff01; MOGI-ROS/Week-3-4-Gazebo-basics 学习分支整理日志 分支概述 这是一个用于个人学习的新分支&#xff0c;目的是扩展基本模型并添加…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

OPENCV图形计算面积、弧长API讲解(1)

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

ffmpeg(三):处理原始数据命令

FFmpeg 可以直接处理原始音频和视频数据&#xff08;Raw PCM、YUV 等&#xff09;&#xff0c;常见场景包括&#xff1a; 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装&#xff08;如封装为 MP4、TS&#xff09; 处理原始 YUV 视频…...