Typora实现Markdown标题自动编号

1、背景

Typora编写Markdown时，各级标题需要手动维护编号，如果标题顺序有调整，需要依次手工重新修改编号，特别是多级标题都要调整的话，更是异常麻烦！昨天在网上看到一个通过修改Typora风格主题的css文件实现自动编号的方法，试用之后感觉非常nice，再也不用管编号了，简直不要太爽！

2、原文在此

网址在这里：https://www.jianshu.com/p/c7dd68f0c1c4

3、我的做法

原文是将如下代码加入每个css文件中

#write h1,
.markdown-section h1 {
    counter-reset: h2;
}

#write h2,
.markdown-section h2 {
    counter-reset: h3;
}

#write h3,
.markdown-section h3 {
    counter-reset: h4;
}

#write h4,
.markdown-section h4 {
    counter-reset: h5;
}

#write h5,
.markdown-section h5 {
    counter-reset: h6;
}

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

#write h3::before,
.markdown-section h3::before {
    counter-increment: h3;
    content: counter(h2) "."counter(h3) " ";
}

#write h4::before,
.markdown-section h4::before {
    counter-increment: h4;
    content: counter(h2) "."counter(h3) "."counter(h4) " ";
}

#write h5::before,
.markdown-section h5::before {
    counter-increment: h5;
    content: none;
}

#write h6::before,
.markdown-section h6::before {
    counter-increment: h6;
    content: none;
}

我是将上述代码写入C:\Users\Administrator\AppData\Roaming\Typora\themes\目录的AutoNumber.css文件，然后在每个主题的css文件第一行加入一句

@import "AutoNumber.css";

然后重启Typora，使配置生效。

4、实际效果

编写的md时，在标题行使用快捷键Ctrl+数字键可以设置对应的标题级别，比如一级标题按Ctrl+1键，二级按Ctrl+2键，依次类推，可以支持5级标题。作者只设置了4级标题的自动编号，我还是觉得不够用，依葫芦画瓢把第5级的css修改了一下：

#write h5::before,
.markdown-section h5::before {
    counter-increment: h5;
    content: none;
}

改为

#write h5::before,
.markdown-section h5::before {
    counter-increment: h5;
    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " ";
}

最终效果：