ReText实现Markdown标题自动编号的技术方案

在Markdown编辑工具ReText中实现标题自动编号是一个常见的排版需求。本文将深入分析技术实现方案，帮助用户优雅地解决这一问题。

核心原理

Markdown本身不支持标题自动编号，但可以通过CSS计数器功能实现。其技术原理是：

1. 利用CSS的counter-reset在文档根元素初始化计数器
2. 通过counter-increment在标题元素触发计数
3. 使用content属性在伪元素中显示编号

具体实现步骤

方案一：内联样式（推荐简单文档）

在Markdown文件头部插入以下CSS代码：

<style>
body {
  counter-reset: h1
}
h1 {
  counter-reset: h2
}
h1:before {
  counter-increment: h1;
  content: counter(h1) ". "
}
h2:before {
  counter-increment: h2;
  content: counter(h1) "." counter(h2) ". "
}
</style>

方案二：外部样式表（适合项目级配置）

1. 创建document.css文件
2. 写入上述CSS规则
3. 在ReText中通过"Preferences → Stylesheet file"指定该CSS文件

注意事项

1. 渲染引擎要求：必须启用WebEngine渲染器

   • 安装依赖：PyQt6-WebEngine或系统对应包
   • 在菜单勾选"Edit → Use WebEngine (Chromium) renderer"

2. 效果可见性：

   • 仅在WebEngine渲染器下可见实时预览
   • PDF导出会自动应用样式

3. 多级标题扩展：可根据需要扩展至h3-h6，例如：

h2 { counter-reset: h3 }
h3:before {
  content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

高级技巧

1. 定制编号样式：可通过修改content属性实现不同编号格式

   • 罗马数字：content: counter(h1, upper-roman) ". "
   • 字母编号：content: counter(h1, upper-alpha) ". "

2. 目录跳转兼容：添加position: relative和left: -1em保持原始标题可点击性

3. 项目统一配置：将CSS文件放入项目模板，实现团队统一编号风格

方案对比

方案	适用场景	优点	缺点
内联样式	单文件临时使用	无需额外文件	不易维护
外部样式	多文档项目	统一管理样式	需配置路径

通过以上方案，用户可以在保持Markdown简洁语法的同时，获得专业级的文档编号效果。这种实现方式既遵循了Web标准，又充分利用了ReText的现代化渲染引擎特性。