使用css counter来美化代码片段的样式

博客园默认的代码片段样式不太美观，特别是复制代码时会把前面的行号也复制下来，操作起来比较麻烦。最近看到一种使用CSS计数器来美化代码片段的方法，于是研究了一下计数器的使用，在此做个笔记。

这是官网的例子：

body {
  counter-reset: section;/*重置section计数器为0，section可以随便命名*/
}

h3:before {
  counter-increment: section; /*增加section，默认是1*/
  content: "Section " counter(section) ": "; /*显示计数器*/
}

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

显示结果为：

通过上面的例子，css计数器的用法可谓一目了然，那么如何用在代码片段的样式上呢？

博客园的代码片段是通过pre标签来声明的，首先修改该标签的样式：

pre{
    counter-reset: linenumber; /*重置名为linenumber的计数器*/
    background: #f5f2f0;
    tab-size: 4;
    position:relative;
}

然后修改行号：

.line-numbers-rows {
    display: block;
    position: absolute;
    pointer - events: none;
    top: 0;
    left: -3.8em;
    width: 3em;
    border-right: 1px solid#999;
    user-select: none;
}

.line-numbers-rows>span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;/*计数器增加*/
}

.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right:.8em;
    text-align:right
}

最后修改html结构为：

<pre>
    <span>代码<span>
    <span>代码<span>
    <span class="line-numbers-rows">
        <span></span><span></span><span></span><span></span>
    </span>
</pre>

参考资料：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters