关于css:纯CSS实现markdown自动编号

2次阅读

共计 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 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

这个我也没理论搞过，原来看了看书
可参考的材料
- 官网文档
- sxei/chrome-plugin-demo 或者搜寻Chrome 插件全攻略
- 《Chrome 扩大及利用开发》，这个就是我原来看的那本老书

下面的操作形式必须要 h1 到h6顺次排开，不然会很难看
如果题目自身就编号了的，就有点蹩脚了
这俩问题在我 github 的博客外面都能看到，解决办法能够是运行下 “

顺便摸索下 `CSS` 其余可变的内容

这个 IE 不兼容，其余浏览器高版本兼容

:root{--var-test:xxx}
.body{
    --var-test:ooo;
    prop-test:var(--var-test)
}

这个 caniuse 也有些说不清楚，主体兼容也是从 IE8 开始的，须要本人总结
弱小的中央是能够读取属性值，赋给另外的属性，也就是能够来个属性联动

如果能有脚本参加，就自在了
attr() 配合伪类来做展现，是一个 JS 和 CSS 通信的一个比拟好的形式

正文完

css

发表至： css

2020-09-21

0

关于css:字节跳动前端岗位面试分享已拿offer

关于css:网站图标开发指南

关于css:你不知道的-CSS-进度条

关于css:微信小程序基础开发四样式与标签

关于c#:技术总结winform和wpf的区别-以及-项目的设计规划

关于css:纯CSS实现markdown自动编号

问题的由来

先搞起来解决问题

在 `typora` 中写 `markdown` 主动编号

讲道理

在 `github pages` 写`markdown` 博客主动编号

在其余网页编辑中自动编码

简略尝试

批改源码

最终产出和利用

再来简略讲一下情理

CSS 主动编号

Chrome 插件或扩大开发

还是有些问题没解决

顺便摸索下 `CSS` 其余可变的内容

CSS 变量或者说自定义属性

attr()

看起来纯 CSS 的解决方案就到此告一段落了

站内搜索

关于css:纯CSS实现markdown自动编号

问题的由来

先搞起来解决问题

在 typora 中写 markdown 主动编号

讲道理

在 github pages 写markdown 博客主动编号

在其余网页编辑中自动编码

简略尝试

批改源码

最终产出和利用

再来简略讲一下情理

CSS 主动编号

Chrome 插件或扩大开发

还是有些问题没解决

顺便摸索下 CSS 其余可变的内容

CSS 变量或者说自定义属性

attr()

看起来纯 CSS 的解决方案就到此告一段落了

站内搜索

在 `typora` 中写 `markdown` 主动编号

在 `github pages` 写`markdown` 博客主动编号

顺便摸索下 `CSS` 其余可变的内容