问题的由来第一次关注这个标题编号问题应该要回到本科毕业论文的时候了。当时，我一个人涉猎这个话题。Word有一个很好的层叠标题功能。设置一次后，只要设置标题样式，就会自动按照设置的标题编号方式进行编号。我们所要做的就是将相应的标题设置为相应的基本标题样式。这个方法让我爱不释手。继续使用。彻底解决了中间插入章节、节等，章节号需要人肉调整的问题。当然，图片的编号和名称都是类似的。直到后来开始使用markdown，由于各种编辑器的切换，一直没有好用的替代品，所以几年前写了一个小工具，用命令行rawbin-/markdown-clear，这个工具解决了在github上写博客的问题，同时在解决博客问题的基础上解决了各个平台发帖的问题，因为号是写在脚本里的，所以是逻辑在这里使用降价在每个平台上发布并将其转换为html，也解决了现阶段的问题。前两天写了一篇拖欠几个月的综合认知总结，突然不想用这个脚本来编号，于是萌生了一个想法：能不能不用人肉自动编号？然后就是下面的内容。让我们先解决问题。以下操作案例均在macOS中制作。在其他平台上可能存在一些差异。在typora中写markdown自动编号打开typora【首选项】找到【外观】=>【主题】=>【打开主题文件夹】在打开目录的base.user.css中添加如下代码#writer{counter-reset:h1}h1{counter-reset:h2}h2{counter-reset:h3}h3{counter-reset:h4}h4{counter-reset:h5}h5{counter-reset:h6}#writerh1:before{counter-increment:h1;内容：counter(h1)"."}#writerh2:before{counter-increment:h2;内容：计数器（h1）“。”counter(h2)"."}#writerh3:before{counter-increment:h3;内容：计数器（h1）“。”计数器（h2）“。”counter(h3)"."}#writerh4:before{counter-increment:h4;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”counter(h4)"."}#writerh5:before{counter-increment:h5;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”counter(h5)"."}#writerh6:before{counter-increment:h6;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”计数器（h5）“。”counter(h6)"."}合理打开typora【偏好设置】找到转到[General]=>[Advanced]=>[EnableDebuggingMode]=>检查它，然后在非源模式下=>[Rightclick]=>[InspectElement]，你可以看到为什么#write在这后面用于在githubpages中编写markdown博客并自动编号。我使用jekyllbootstrap.com的模板。比较简单的是打开rawbin-.github.io中任意一篇文章，然后【右键】=>【勾选】得到两个内容容器类是.content，严格点是#wrap。.content样式文件在assets/themes/bootstrap3，可以修改其下的css/style.css，将如下内容改为源码assets/themes/bootstrap3/css/style。.css中的内容{counter-reset:h1}h1{counter-reset:h2}h2{counter-reset:h3}h3{counter-reset:h4}h4{counter-reset:h5}h5{counter-reset:h6}.contenth1:before{counter-increment:h1;content:counter(h1)"."}.contenth2:before{counter-increment:h2;内容：计数器（h1）“。”counter(h2)"."}.contenth3:before{counter-increment:h3;内容：计数器（h1）“。”计数器（h2）“。”counter(h3)"."}.contenth4:before{counter-increment:h4;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”}。内容h5:before{counter-increment:h5;内容：柜台(h1)“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”counter(h5)"."}.contenth6:before{counter-increment:h6;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”计数器（h5）“。”counter(h6)"."}在其他网页编辑器如各种博客平台，各种自媒体平台等自动编码，比如我们常用的文档编写语言，都可以使用。这里涉及到一个浏览器插件markdown，可以在页面富文本编辑器中自动将markdown转成网页。也是我前面说的这几年在各个平台发帖的套路。写一个带编号的标题和markdown，粘贴到编辑器中，然后点击，就完成了。这里简单试试markdown有一个配置页面，可以配置调整css，可以预览效果。简单看了下，是用js把class转成style属性，不支持伪类。修改源码到adam-p/markdown-here看看到了，代码两年没动了，不管怎么样，先fork到rawbin-/markdown-here，然后pull下来代码，先build一下css文件src/common/auto-number-title，找到container类可以在markdown的选项页here.markdown-here-wrapper.markdown-here-wrapper{counter-reset:h1}.markdown-here-wrapperh1{counter-reset:h2}.markdown-here-wrapperh2{counter-reset:h3}.markdown-here-wrapperh3{counter-reset:h4}.markdown-here-wrapperh4{counter-reset:h5}.markdown-here-wrapperh5{counter-reset:h6}.markdown-here-wrapperh1:before{counter-increment:h1;内容：counter(h1)“.”}.markdown-here-wrapperh2:before{counter-increment:h2;内容：计数器（h1）“。”counter(h2)"."}.markdown-here-wrapperh3:before{counter-increment:h3;内容：计数器（h1）“。”计数器（h2）“。”counter(h3)"."}.markdown-here-wrapperh4:before{counter-increment:h4;内容：计数器（h1）“。”计数器（h2）“。”合作社下（h3）“。”counter(h4)"."}.markdown-here-wrapperh5:before{counter-increment:h5;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”counter(h5)"."}.markdown-here-wrapperh6:before{counter-increment:h6;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”计数器（h5）“。”counter(h6)"."}然后修改注入配置，允许加载这个样式文件，引入其余的样式问题，有错就好了。最终输出和应用clonerawbin-/markdown-here打开Chrome设置三点=>【更多工具】=>【扩展】打开【开发者模式】选择【加载解压后的扩展】=>选择克隆代码下的src目录进行安装并加载插件。将插件固定在插件栏中，方便使用。auto-number-title.scss的内容如下。计数器复位：h2；&:before{反增量：h1;内容：计数器（h1）“。”；}}h2{计数器复位：h3；&:before{反增量：h2;内容：计数器（h1）“。”计数器（h2）“。”}}h3{计数器重置：h4；＆：前{反增量：h3；内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”}}h4{计数器复位：h5；&:before{反增量：h4;：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”}}h5{计数器复位：h6；&:before{反增量：h5;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”计数器（h5）“。”}}h6:before{反增量：h6;内容：计数器（h1）“。”计数器（h2）“。”计数器（h3）“。”计数器（h4）“。”计数器（h5）“。”计数器（h6）“。”}}简单说一下CSS自动编号不是新特性，也不是老特性，它出现在CSS2.1，搜索站点：w3.orgcss自动编号可以查到，当然到今天以后的版本（CSS3,CSS2.2)有这个功能，从caniuse可以看出，IE8及以上兼容，很棒Guide4th，这里是翻译gdut-yy/CSS-The-Definitive-Guide-4th-zhChrome插件或扩展开发这个我还真没做过。看了官方文档sxei/chrome-plugin-demo或者搜索了Chrome插件指南《Chrome扩展及应用开发》。这是我读到的。那本旧书还有一些问题没有解决。上面的操作方法一定要从h1到h6按顺序排列，不然不好看。如果标题本身是编号的，那就有点糟糕了。这两个问题可以在我的github博客中看到。现在，解决方案可以是运行``顺便探索一下CSS的其他变量内容。CSS变量或自定义属性不兼容IE，其他浏览器兼容更高版本：root{--var-test:xxx}.body{--var-test:ooo;prop-test:var(--var-test)}attr()caniuse也有点不清楚，主体兼容性也是从IE8开始的，需要自己总结厉害的地方可以看下取属性值赋值它到另一个属性，也就是说，您可以使用属性链接看起来像纯CSS解决方案。这就是结局。如果您可以涉及脚本，那么您是免费的。更好的JS和CSS通信方式
