问题的由来
第一次关注这个题目编号的问题应该回溯到本科毕业论文的时候了，过后还独自涉猎过这个主题，Word 有个很好的个性级联题目，一次设置好之后，后续只有设置题目款式就能依照设置的题目编号形式主动编号，咱们要做的只是将对应的题目设置成对应根本的题目款式就好了，这个办法让我爱不释手，多年来始终沿用。齐全解决了中途插入一章，一节等等导致的章节编号都须要人肉调整的问题，当然还有图片的编号命名什么的，都是相似的。
直到前面开始用markdown 因为各个编辑器的切换，始终没有一个好用的代替计划，所以几年前我写了一个小工具用命令行来做这事rawbin-/markdown-clear，这个工具解决了在github写博客的问题，同时在解决博客的问题的根底上解决了在各个平台发文的问题，因为编号是用脚本写上去的，所以用markdown here在各个平台发文也就牵强附会的转成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}#writer h1:before { counter-increment: h1; content: counter(h1) ". "}#writer h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "}#writer h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}#writer h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}#writer h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}#writer h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}讲道理
- 关上
typora【偏好设置】 - 找到【通用】=>【高级 】=>【开启调试模式】=>勾选
- 而后在非源码模式下=>【右键】=>【查看元素】，就能够看到为什么是
#write了 - 这个前面还有用
在github pages 写markdown博客主动编号
我用的是jekyllbootstrap.com的模板，比较简单
- 关上任意一篇
rawbin-.github.io中的文章，而后【右键】=>【查看】 能够拿到两个内容
- 容器类为
.content，严格点为#wrap .content - 款式文件在
assets/themes/bootstrap3，能够批改其下的css/style.css
- 容器类为
- 将如下内容改到源代码的
assets/themes/bootstrap3/css/style.css中
.content { counter-reset: h1}h1 { counter-reset: h2}h2 { counter-reset: h3}h3 { counter-reset: h4}h4 { counter-reset: h5}h5 { counter-reset: h6}.content h1:before { counter-increment: h1; content: counter(h1) ". "}.content h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "}.content h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}.content h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}.content h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}.content h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}在其余网页编辑中自动编码
比方各个博客平台，各个自媒体平台等，像咱们罕用的写文档的语雀都能够的。
这外面波及到一款浏览器插件markdown here，能够在页面富文本编辑器中将markdown 主动转换为网页，这也是我后面说到的这几年在各个平台发文的套路，写好编号好题目markdown往编辑器外面一贴，而后一点 ，搞定。
简略尝试
markdown here有一个配置页面，能够配置和调整css，并能预览成果- 简略看了下是用
js把类转成了style属性，并且不反对伪类
批改源码
- 到
adam-p/markdown-here看到，曾经两年没动代码了 - 不管三七二十三先
fork一把到rawbin-/markdown-here，而后把代码拉下来 - 先把css文件建起来
src/common/auto-number-title，找容器类能够在markdown here的选项页面找到.markdown-here-wrapper
.markdown-here-wrapper { counter-reset: h1}.markdown-here-wrapper h1 { counter-reset: h2}.markdown-here-wrapper h2 { counter-reset: h3}.markdown-here-wrapper h3 { counter-reset: h4}.markdown-here-wrapper h4 { counter-reset: h5}.markdown-here-wrapper h5 { counter-reset: h6}.markdown-here-wrapper h1:before { counter-increment: h1; content: counter(h1) ". "}.markdown-here-wrapper h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "}.markdown-here-wrapper h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}.markdown-here-wrapper h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}.markdown-here-wrapper h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}.markdown-here-wrapper h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}- 而后批改一下注入配置，容许加载这个款式文件，并引入这个款式问题
- 剩下的有错改错就好了
最终产出和利用
- 克隆
rawbin-/markdown-here - 关上Chrome 设置三个点=>【更多工具】=>【扩大程序】
- 关上【开发者模式】
- 抉择【加载已解压的扩大程序】=>抉择克隆代码下的
src目录即可装置并加载插件 - 将插件固定在插件栏方便使用
auto-number-title.scss内容如下
.markdown-here-wrapper { counter-reset: h1; h1 { counter-reset: h2; &:before { counter-increment: h1; content: counter(h1) ". "; } } h2 { counter-reset: h3; &:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } } h3 { counter-reset: h4; &:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } } h4 { counter-reset: h5; &:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } } h5 { counter-reset: h6; &:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } } h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " }}再来简略讲一下情理
CSS 主动编号
- 不是一个新个性，或者说是一个老个性了，呈现在
CSS 2.1中，搜寻site:w3.org css automatic numbering能够找到，当然截止明天起初的版本(CSS 3,CSS 2.2)都有这个个性，从caniuse上能够看到，IE8及以上兼容，很棒吧 简略阐明
counter-reset重置counter-increment++counter()取值- 配合
before和after来做 - 还有更多的玩法，参见
CSS The Defiiniitiive Guide 4th，这里有翻译gdut-yy/CSS-The-Definitive-Guide-4th-zh
Chrome插件或扩大开发
- 这个 我也没理论搞过，原来看了看书
可参考的材料
- 官网文档
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的解决方案就到此告一段落了
- 如果能有脚本参加，就自在了
attr()配合伪类来做展现，是一个JS和CSS通信的一个比拟好的形式