HTML 用CSS创建代码行号

在本文中，我们将介绍如何使用CSS在<pre>标签中创建代码的行号。

阅读更多：HTML 教程

什么是`<pre>`标签和行号？

HTML中的<pre>标签用于定义预定义格式的文本。通常用于表示计算机代码和其他预格式化文本。

行号是指代码中行的数字标识，使得阅读和理解代码更加方便和易懂。

在制作编程教程或者与其他人分享代码时，行号是非常有帮助的。接下来，我们将使用CSS来实现代码的行号。

使用`counter-reset`和`counter-increment`属性创建行号

CSS中有两个属性非常适用于创建行号，即counter-reset和counter-increment属性。

counter-reset属性用于将行号的计数器重置为指定的初始值。例如，counter-reset: line-numbers 1;将创建一个名为”line-numbers”的计数器，并将其初始值设置为1。

counter-increment属性用于递增计数器的值。例如，counter-increment: line-numbers;将每次递增计数器的值。

接下来，我们将在<pre>标签的CSS中使用这两个属性来创建代码行号。

<style>
  pre {
    counter-reset: line-numbers 1;
    padding-left: 20px;
    position: relative;
  }

  pre::before {
    counter-increment: line-numbers;
    content: counter(line-numbers);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: right;
    color: gray;
  }
</style>

<pre>
  <code>
    function factorial(n) {
      if (n === 0 || n === 1) {
        return 1;
      } else {
        return n * factorial(n-1);
      }
    }
  </code>
</pre>

在上述示例中，我们首先在<pre>标签的CSS中进行设置，将行号的计数器重置为1，并设置左边距为20px，以创建行号的位置。

然后，我们使用::before伪元素在每行的左侧添加行号。通过递增计数器的值，并将其内容设置为计数器的值，实现了行号的显示。我们还设置了伪元素的样式，包括位置、宽度、文本对齐方式和颜色。

如果你将上述示例代码添加到HTML文档中并预览，你将看到代码行的左侧有行号。

自定义行号的样式

除了基本的行号功能之外，我们还可以使用CSS来自定义行号的样式，以使其更加符合我们的设计需求。

以下是一些自定义行号样式的示例：

更改行号颜色和字体大小

<style>
  pre::before {
    color: red;
    font-size: 16px;
  }
</style>

添加行号的背景色和边框

<style>
  pre::before {
    background-color: #f2f2f2;
    border-right: 1px solid #ddd;
    padding-right: 10px;
  }
</style>

添加行号的背景图片

<style>
  pre::before {
    background-image: url("line-number-background.png");
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 20px;
  }
</style>

通过这些自定义样式的添加，我们可以根据自己的需求美化行号的外观。