第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了,当时还单独涉猎过这个主题,Word
有个很好的特性级联标题
,一次设置好以后,后续只要设置标题样式就能按照设置的标题编号方式自动编号,咱们要作的只是将对应的标题设置成对应基本的标题样式就行了,这个方法让我爱不释手,多年来一直沿用。彻底解决了中途插入一章,一节等等致使的章节编号都须要人肉调整的问题,固然还有图片的编号命名什么的,都是相似的。
直到后面开始用markdown
因为各个编辑器的切换,一直没有一个好用的替代方案,因此几年前我写了一个小工具用命令行来作这事rawbin-/markdown-clear
,这个工具解决了在github
写博客的问题,同时在解决博客的问题的基础上解决了在各个平台发文的问题,由于编号是用脚本写上去的,因此用markdown here
在各个平台发文也就瓜熟蒂落的转成html就好了,也解决了这个阶段的问题。
前两天把拖欠几个月的全面认知
的总结写了,忽然不想用这个脚原本编号了,产生一个想法:能不能不人肉编号,自动编上?而后就有了下面的内容。css
如下操做案例都是在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
的模板,比较简单html
rawbin-.github.io
中的文章,而后【右键】=>【检查】能够拿到两个内容git
.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) ". " }
好比各个博客平台,各个自媒体平台等,像咱们经常使用的写文档的语雀均可以的。github
这里面涉及到一款浏览器插件markdown here
,能够在页面富文本编辑器中将markdown
自动转换为网页,这也是我前面说到的这几年在各个平台发文的套路,写好编号好标题markdown
往编辑器里面一贴,而后一点 ,搞定。chrome
markdown here
有一个配置页面,能够配置和调整css,并能预览效果js
把类转成了style
属性,而且不支持伪类adam-p/markdown-here
看到,已经两年没动代码了fork
一把到rawbin-/markdown-here
,而后把代码拉下来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
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 2.1
中,搜索site:w3.org css automatic numbering
能够找到,固然截止今天后来的版本(CSS 3
, CSS 2.2
)都有这个特性,从caniuse
上能够看到,IE8
及以上兼容,很棒吧简单说明bootstrap
counter-reset
重置counter-increment
++counter()
取值before
和after
来作CSS The Defiiniitiive Guide 4th
,这里有翻译gdut-yy/CSS-The-Definitive-Guide-4th-zh
可参考的资料浏览器
sxei/chrome-plugin-demo
或者搜索Chrome插件 全攻略
h1
到h6
依次排开,否则会很好看github
的博客里面都能看到,解决办法能够是运行下``CSS
其余可变的内容:root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) }
caniuse
也有些说不清楚,主体兼容也是从IE8
开始的,须要本身总结attr()
配合伪类来作展现,是一个JS和CSS通讯的一个比较好的方式