Typora 标题自动编号

2023年7月11日

摘要

Typora 作为一个优秀的 Markdown 写作工具，各项功能的支持都已经相当的完善，但是在写作的过程中，由于 Markdown 本身的语法限制，各级标题无法实现自动编号的功能。我们虽然不能直接修改 Markdown 的语法，但得益于 Typora 强大的外观自定义功能，我们可以通过一定的方式让标题编号以样式的形式显示在 Typora 中。

实现步骤

进入外观配置文件目录

首先进入 Typora 设置，在左侧找到 外观 或 Appearance 选项卡，进入后在下方找到 打开主题文件夹 后进入，此处是所有 Typora 的主题及外观相关的配置文件所在的地方。

新建全局配置文件

可以看到，此文件夹下有非常多的主题文件，但都是在选中对应主题才会生效。除了这些文件以外，我们可以创建一个名为 base.user.css 的配置文件，此文件中的配置，无论应用任何主题应用的情况下，都会生效。

其内容为：

/** initialize css counter */
#write {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}


#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;
}

此时，除了一级标题外，从二级标题开始，都会自动被多级编号。

此配置文件较为符合本人的使用习惯，因为一级标题往往是作为文章标题使用的，无需被编号，但如果需要一级标题也被编号，则可使用以下配置文件：

/** initialize css counter */
#write {
   counter-reset: h1
}

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 h1:before {
   counter-increment: h1;
   content: counter(h1) ". "
}

#write h2:before {
   counter-increment: h2;
   content: counter(h1) "." counter(h2) ". "
}

#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused 
headings */ {
   counter-increment: h3;
   content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#write h4:before,
h4.md-focus.md-heading:before {
   counter-increment: h4;
   content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#write h5:before,
h5.md-focus.md-heading:before {
   counter-increment: h5;
   content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#write h6:before,
h6.md-focus.md-heading:before {
   counter-increment: h6;
   content: counter(h1) "." 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;
}

此配置文件可实现所有级别的标题的多级编号。

注意事项

可以发现的是，该方案只是使用了 CSS 脚本修改了每一级标题的显示样式，并没有修改内容本身，因此直接复制此 Markdown 文件将不会包含编号信息。幸运的是，如果最终导出为 PDF 文件，则编号会被转化为文本，可以被复制。