【非主题的方式】Typora 标题自动编号功能的实现——全网首发！

文章目录

先看动态图效果展示
实操步骤
- 第一步：找到 Typora 的安装位置
- 第二步：对原文件进行备份【需要管理员权限】
- 第三步：用管理员权限打开系统自带的记事本
- 第四步：复制下方代码到指定位置
简述原理
其他方式

先看动态图效果展示

实际效果如下图，未录制按键显示，按下的快捷键就是 F5 和 F6：
可以直接影响到：大纲视图、目录、导出的PDF的序号。

在这里插入图片描述

实操步骤

这种方式的优点有：

在 Typora 中使用 快捷键 F5 来实现一键自动给标题添加编号，也能处理：有些标题已有编号，但前后又新增标题的情况。
在 Typora 中使用 快捷键 F6 来实现一键移除所有标题的编号。【为的是兼容那种自带 CSS 编号的主题】
具体的快捷键也可以根据自己的喜好更改，但，最好不要包含 Alt 键，处理起来麻烦，因为 Typora 与大多数软件一样，都可以使用 Alt 键与其他字母组合成新的快捷键来操作菜单栏。
只需要使用 Typora 就可以实现，不需要使用别的软件来辅助完成。
编号都是 真实添加 的，而不是视觉上的编号。
较为良好的 提示功能，添加序号、移除序号等操作都有提示。
可以在未保存的情况下进行一键自动编号和移除编号，操作后，自动保存变更后的内容，不需要手动按 Ctrl + S 快捷键。【这个功能给我卡了挺长时间】
与主题无关，任何主题都可以使用，但最好不要与添加了 CSS 计数器的主题联合使用，因为两个序号看着别扭，当然，你也无需担心，移除编号的功能就是为此准备的。

我的 Typora 版本信息【并且取消了软件的自动更新】：

在这里插入图片描述

第一步：找到 Typora 的安装位置

因为我们要修改安装目录下的 window.html 文件的内容。

通过右键 Typora 的图标，然后选：找到文件位置，如果找到的是快捷方式的目录，那么再右键这个快捷方式，选择：打开文件所在位置。

进入 resources 目录中，就可以看到 window.html 这个文件了。

据说 window.html 文件：正式版的 Typora 是在 resources 目录下，而试用版的是在 resources 目录下的一个名为 app 的目录下，我的不是免费版，所以不清楚。

第二步：对原文件进行备份【需要管理员权限】

需要注意：在默认的安装路径下，对 window.html 文件进行 Ctrl + C 和 Ctrl + V 操作来备份时，会提示需要管理员权限。

在这里插入图片描述

第三步：用管理员权限打开系统自带的记事本

先用管理员身份打开记事本，然后再用记事本来打开这个 window.html 文件。

因为我们要做的就是对 window.html 文件内容进行修改，如果不用管理员权限打开记事本，修改后，是无法保存的。

你可以使用别的软件来编辑，为了满足大多数人，这里就只说记事本了，只要你能向 window.html 写入内容，什么方式都可以。

第四步：复制下方代码到指定位置

先在 window.html 文件中找到下图中的位置：

其实就是在倒数第二个标签 </body> 的前面按一下回车，然后，再按 Ctrl + V 粘贴我给的代码即可。

在这里插入图片描述

复制下方完整代码，并粘贴到上图中所指的位置：

<script>
// 标题自动编号工具 - 完全适配 Typora 1.9.5
(() => {const showNotification = (message, isSuccess = true) => {const toast = document.createElement('div');toast.style = `position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: ${isSuccess ? '#4CAF50' : '#F44336'};color: white;padding: 12px 24px;border-radius: 4px;z-index: 9999;font-family: -apple-system, sans-serif;box-shadow: 0 3px 10px rgba(0,0,0,0.2);animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;`;toast.textContent = message;document.body.appendChild(toast);setTimeout(() => toast.remove(), 3000);};// 添加序号功能const addNumbering = async () => {try {await window.File.saveUseNode();const mdContent = await window.File.getContent();const lines = mdContent.split('\n');const counters = [0,0,0,0,0,0];let lastLevel = 0;const processed = lines.map(line => {const match = line.match(/^(#{1,6})\s*((?:\d+\.)*)\s*(.*)/);if (!match) return line;const [_, hashes, oldNum, text] = match;const level = hashes.length;counters[level-1]++;if (level < lastLevel) counters.fill(0, level);lastLevel = level;const newNum = counters.slice(0, level).join('.');return `${hashes} ${newNum}. ${text.trim()}`;}).join('\n');if (processed !== mdContent) {window.File.reloadContent(processed);window.File.saveUseNode();showNotification('✅ 标题已自动添加序号');} else {showNotification('ℹ️ 未检测到需要添加序号的标题', false);}} catch (error) {console.error('添加序号失败:', error);showNotification('❌ 添加序号失败', false);}};// 移除序号功能const removeNumbering = async () => {try {await window.File.saveUseNode();const mdContent = await window.File.getContent();const processed = mdContent.split('\n').map(line => {// 匹配带有序号的标题（如 ## 1.2. 标题）const match = line.match(/^(#{1,6})\s*([\d.]+\.)\s*(.*)/);return match ? `${match[1]} ${match[3]}` : line; // 移除非标题行的序号}).join('\n');if (processed !== mdContent) {window.File.reloadContent(processed);window.File.saveUseNode();showNotification('✅ 标题序号已移除');} else {showNotification('ℹ️ 未检测到可移除的标题序号', false);}} catch (error) {console.error('移除序号失败:', error);showNotification('❌ 移除序号失败', false);}};// 快捷键绑定document.addEventListener('keydown', e => {if (e.key === 'F5' || e.keyCode === 116) {  // F5 添加序号e.preventDefault();addNumbering();}else if (e.key === 'F6' || e.keyCode === 117) {  // F6 移除序号e.preventDefault();removeNumbering();}});// 添加CSS动画const style = document.createElement('style');style.textContent = `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }`;document.head.appendChild(style);console.log('📌 标题编号工具已加载\nF5: 添加标题序号\nF6: 移除标题序号');
})();
</script>

保存 window.html 文件，并关闭记事本，重启 Typora ，并测试功能是否正常。

简述原理

其实，哪有什么原理，Typora 又不是我开发的，我又没有源码，全靠在控制台瞎猜和 穷举般的测试 以及一些调试技巧。

核心就是：找到那个可以获取到 markdown 文件未被渲染时的内容的 API，也就是拿到 Markdown 文件的 ”源文件“，说人话就是标题中包含井号的那种内容，因为 Typora 中，Markdown 的内容已经被渲染成 html 页面了，标题一被渲染成 h1 标签，而不是：“# 一级标题” 了。可以说只要能拿到原文，你让任何一个 AI 来写自动编号的功能，我想都是没有任何问题的。

我在测试的过程中找到的关键 api 有：

获取未被渲染时的内容： window.File.getContent()
将编号后的内容重新加载到 Typora 中： window.File.reloadContent()
自动保存内容： window.File.saveUseNode()

遇到的坑：

在调试的过程中，发现原文找到了，处理后的结果也是正确的，但就是页面的内容就是没有变化，关键就是不知道这个 reloadContent() 方法。然后自己在控制台输出 window.File 的所有内容，一个一个的看，感觉这个方法有点像，于是就去尝试，又去调试测试它的传参。可算是找到了。
调用 saveUseNode() 方法来进行自动保存的时候，需要加上 await 关键字，而且需要在调用 getContent() 方法前就调用一次，否则就会出现难以描述的诡异 bug。
被AI坑了，用的是 deepseek，它资料库中的 Typora 的版本还是以前的免费版。然后它还非常肯定的告诉你，你应该用某个 api ，但其实，那些 api 早就换掉了，根本就不存在，再加上内容越来越长，它出现了太多幻觉了。所以，你在使用的过程中，最好确定下版本，如果版本不一致，最好在 Typora 的控制台测试下，我提到的三个关键api是否存在。【打开 Typora 控制台的方法快捷键是：Shift + F12】

注意事项：就是需要确定你的 Typora 的版本号是否为 1.9.5，如果不是，那么就需要确保三个关键的 api 都有。如果没有这三个关键的api ，那么你就需要自己去测试你的 Typora 版本下，可以实现上述 3个功能的 api 以及对应的调用方法，替换掉代码中的位置，并进行测试。所以，在正式修改前，请务必做好备份。