你好世界！！！

我希望你快乐地享受你的一天。

对于那些想自己构建 CMS 的人，您可以为代码块设置样式。 有人可能想使用库，这非常棒。 但是，我想举一个简单的例子，使用纯 HTML/CSS 来获得相同的结果（在特定的期望水平上）。

CSS:

.code-block-wrapper {  white-space: nowrap;  overflow: auto;}.code-block {  counter-reset: line-numb;  display: inline-block;  min-width: 100%;}.code-block div {  font-size: .875em;  color: rgb(108,117,125);  font-family: monospace;  background-color: rgb(248,249,250);  padding: 0.25rem 0.5rem;  padding-left: 3.5rem;  padding-right: 1rem;  position: relative;  white-space: nowrap;  font-weight: 400;}.code-block div::before {  counter-increment: line-numb;  content: counter(line-numb) ".";  padding: 0.25rem 0.5rem;  width: 3rem;  text-align: center;  position: absolute;  display: inline-block;  top: 0;  left: 0;}.code-block div:nth-child(odd),.code-block div:nth-child(odd)::before {  background-color: #ededed !important;}

HTML:

<h2>Code snippet</h2>

<div class="code-block-wrapper">

<div class="code-block">

<div>function greet() { console.log("Hello World!!!"); }</div>

<div>greet();</div>

</div>

</div>

结果：

导致大宽度

导致水平滚动条宽度小 - 1

导致水平滚动条宽度小 - 2

你们（尤其是我自己）可以带走的都是关于 reset-counter 、 counter-increment 和 counter 的。 我们将逐一介绍：

reset-counter ：顾名思义，此 CSS 属性用于将计数器重置为 0。

- 该属性的值是供以后使用的变量。 你可以把这个值想象成一个 JS 变量。

- 每当使用包含此属性的 CSS 类的 DOM 元素在屏幕上呈现时，计数器将被重置。

counter-increment ：在任何想要在显示之前增加计数器值的 CSS 类中使用此属性。 而且，该属性的值是在 reset-counter 中声明的变量。counter(<counter variable>) ：此 CSS 属性提取计数器值并返回使用。

最后，我想给出一些解释：

如您在上面的代码中所见，代码块 HTML 的结构是：

- div.code-block-wrapper ：这是块的最外层元素。

- div.code-block ：这是代码块包装器的唯一子代。

- div ：这是显示代码的地方。

- div::before : 这是显示计数器值的地方。

为什么 .code-block-wrapper 和 .code-block 保持在一起？ 这是因为在我实现这个示例的过程中，我在一个有水平滚动条的小屏幕上遇到了这个问题。 那时，我只使用了 .code-block 和 div （没有包装器），当滚动到最后时，我看到有一个空白（在 .code-block 中），因为 div 子级被拖到左边并放弃 .code-block 上的空白区域。

就这样。

我真的希望你能从中找到乐趣，并且对 CSS 有更多的了解。

肯定有其他更好的方法可以实现为 CMS 开发代码块的要求（可能使用我上面提到的库）。 因此，如果您有任何反馈，请在下面帮助我发表评论，以便我们可以了解更多信息并共同丰富我们的知识。

而且，我非常感谢您花时间阅读这篇文章。

再见。