纯CSS怎么实现markdown自动编号

本文将为大家详细介绍“纯CSS怎么实现markdown自动编号”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“纯CSS怎么实现markdown自动编号”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

css是什么意思

css是一种用来表现html或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

问题的由来

第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了，当时还单独涉猎过这个主题，Word 有个很好的特性级联标题，一次设置好之后，后续只要设置标题样式就能按照设置的标题编号方式自动编号，我们要做的只是将对应的标题设置成对应基本的标题样式就好了，这个方法让我爱不释手，多年来一直沿用。完全解决了中途插入一章，一节等等导致的章节编号都需要人肉调整的问题，当然还有图片的编号命名什么的，都是类似的。

直到后面开始用markdown 由于各个编辑器的切换，一直没有一个好用的替代方案，所以几年前我写了一个小工具用命令行来做这事rawbin-/markdown-clear，这个工具解决了在GitHub写博客的问题，同时在解决博客的问题的基础上解决了在各个平台发文的问题，因为编号是用脚本写上去的，所以用markdown here在各个平台发文也就顺理成章的转成html就行了，也解决了这个阶段的问题。
前两天把拖欠几个月的全面认知的总结写了，突然不想用这个脚本来编号了，产生一个想法：能不能不人肉编号，自动编上？然后就有了下面的内容。

先搞起来解决问题

以下操作案例都是在MacOS中产出，其他平台可能有些许差别，换汤不换药。

• 在typora中写markdown自动编号

• 打开typora【偏好设置】

• 找到【外观】=>【主题】=>【打开主题文件夹】

将如下代码加入到打开目录的base.user.css 中

#writer {    counter-reset: h2}h2 {    counter-reset: h3}h3 {    counter-reset: h4}h4 {    counter-reset: h5}h5 {    counter-reset: h6}h6 {    counter-reset: h7}#writer h2:before {    counter-increment: h2;    content: counter(h2) ". "}#writer h3:before {    counter-increment: h3;    content: counter(h2) "." counter(h3) ". "}#writer h4:before {    counter-increment: h4;    content: counter(h2) "." counter(h3) "." counter(h4) ". "}#writer h5:before {    counter-increment: h5;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}#writer h6:before {    counter-increment: h6;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}#writer h7:before{    counter-increment: h7;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "}

讲道理

• 打开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: h2}h2 {    counter-reset: h3}h3 {    counter-reset: h4}h4 {    counter-reset: h5}h5 {    counter-reset: h6}h6 {    counter-reset: h7}.content h2:before {    counter-increment: h2;    content: counter(h2) ". "}.content h3:before {    counter-increment: h3;    content: counter(h2) "." counter(h3) ". "}.content h4:before {    counter-increment: h4;    content: counter(h2) "." counter(h3) "." counter(h4) ". "}.content h5:before {    counter-increment: h5;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}.content h6:before {    counter-increment: h6;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}.content h7:before{    counter-increment: h7;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "}

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

比如各个博客平台，各个自媒体平台等，像我们常用的写文档的语雀都可以的。

这里面涉及到一款浏览器插件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: 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 h6 {    counter-reset: h7}.markdown-here-wrapper h2:before {    counter-increment: h2;    content: counter(h2) ". "}.markdown-here-wrapper h3:before {    counter-increment: h3;    content: counter(h2) "." counter(h3) ". "}.markdown-here-wrapper h4:before {    counter-increment: h4;    content: counter(h2) "." counter(h3) "." counter(h4) ". "}.markdown-here-wrapper h5:before {    counter-increment: h5;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}.markdown-here-wrapper h6:before {    counter-increment: h6;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}.markdown-here-wrapper h7:before{    counter-increment: h7;    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "}

• 然后修改一下注入配置，允许加载这个样式文件，并引入这个样式问题

• 剩下的有错改错就好了

最终产出和应用

• 克隆rawbin-/markdown-here

• 打开Chrome 设置三个点=>【更多工具】=>【扩展程序】

• 打开【开发者模式】

• 选择【加载已解压的扩展程序】=>选择克隆代码下的src目录即可安装并加载插件

• 将插件固定在插件栏方便使用

• auto-number-title.scss内容如下

.markdown-here-wrapper {    counter-reset: h2;    h2 {        counter-reset: h3;        &:before {            counter-increment: h2;            content: counter(h2) ". ";        }    }    h3 {        counter-reset: h4;        &:before {            counter-increment: h3;            content: counter(h2) "." counter(h3) ". "        }    }    h4 {        counter-reset: h5;        &:before {            counter-increment: h4;            content: counter(h2) "." counter(h3) "." counter(h4) ". "        }    }    h5 {        counter-reset: h6;        &:before {            counter-increment: h5;            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "        }    }    h6 {        counter-reset: h7;        &:before {            counter-increment: h6;            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "        }    }    h7:before{        counter-increment: h7;        content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "    }}

再来简单讲一下道理

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扩展及应用开发》，这个就是我原来看的那本老书

还是有些问题没解决

• 上面的操作方式必须要h2到h7依次排开，不然会很好看

• 如果标题本身就编号了的，就有点糟糕了

• 这俩问题在我github的博客里面都能看到，解决办法可以是运行下``

顺便探索下CSS其他可变的内容

CSS变量或者说自定义属性

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

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

attr()

• 这个caniuse也有些说不清楚，主体兼容也是从IE8开始的，需要自己总结

• 强大的地方是可以读取属性值，赋给另外的属性，也就是可以来个属性联动

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

• 如果能有脚本参与，就自由了

• attr() 配合伪类来做展示，是一个JS和CSS通信的一个比较好的方式

如果你能读到这里，小编希望你对“纯CSS怎么实现markdown自动编号”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注编程网精选频道！