快活林资源网

纯CSS实现markdown自动编号的示例代码
网页制作 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

问题的由来

第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了，当时还单独涉猎过这个主题，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通信的一个比较好的方式
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com