前军教程网

你好世界！！！

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

对于那些想自己构建 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;
}

• :nth-child(even) 也可以使用

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>

结果：

你们（尤其是我自己）可以带走的都是关于 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 开发代码块的要求（可能使用我上面提到的库）。 因此，如果您有任何反馈，请在下面帮助我发表评论，以便我们可以了解更多信息并共同丰富我们的知识。

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

再见。