纯CSS●▂●完成markdown全自动序号的实例编码

日期:2021-03-24 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

难题的来历

第一次关心这一题目序号的难题应当回朔到大学本科大学毕业毕业论文的情况下了,那时候还独立涉足过这一主题风格,Word 有一个非常好的特点联级题目,一次设定好以后,事后要是设定题目款式就可以依照设定的题目序号方法全自动序号,大家要做的仅仅将相匹配的题目设定成相匹配基本的题目款式就行了,这一方式要我爱不释手,很多年来一直延用。彻底处理了半途插进一章,一节这些造成的章节目录序号都必须人肉调节的难题,自然也有照片的序号取名甚么的,全是相近的。

直至后边刚开始用markdown 因为每个编写器的转换,一直沒有一个功能强大的取代计划方案,因此两年前我写了一个实用工具用指令行来做这件事情rawbin-/markdown-clear,这一专用工具处理了在github写文章赚钱的难题,同时在处理blog的难题的基本上处理了在每个服务平台出文的难题,由于序号是用脚本制作写上来的,因此用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 写markdownblog全自动序号

我用的是jekyllbootstrap.com的模版,较为简易

开启随意一篇rawbin-.github.io中的文章内容,随后【鼠标右键】=>【查验】
能够取得2个內容

  • 器皿类为 .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) ". "
}

在别的网页页面编写中全自动编号

例如每个blog服务平台,每个自媒体平台服务平台等,像大家常见的写文本文档的语雀都可以以的。

这儿面涉及到到一款访问器软件markdown here,能够在网页页面富文字编写器里将markdown 全自动变换为网页页面,这也就是我前边说到的这两年在每个服务平台出文的招数,写好序号好题目markdown往编写器里边一贴,随后一点 ,拿下。

简易试着

  • markdown here 有一个配备网页页面,能够配备和调节css,能够浏览实际效果
  • 简易看过下是用js把类转变成style特性,而且不兼容伪类
  • 改动源代码
  • 到adam-p/markdown-here 见到,早已2年没动编码了
  • 无论三七二十三先 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的blog里边都可以看到,处理方法能够是运作下``

顺带探寻下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全自动序号的实例编码的文章内容就详细介绍到这了,大量有关CSS markdown全自动序号內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:animation和t⊙^⊙ransition的差别 返回下一篇:没有了