共计 5244 个字符,预计需要花费 14 分钟才能阅读完成。
问题的由来
第一次关注这个题目编号的问题应该回溯到本科毕业论文的时候了,过后还独自涉猎过这个主题,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 通信的一个比拟好的形式