CSS 如何在Google Prettify中为所有行添加行号

在本文中，我们将介绍如何使用CSS为Google Prettify中的所有行添加行号。Google Prettify是一个用于代码高亮显示的开源库，它可以帮助我们更好地呈现代码。

阅读更多：CSS 教程

为Google Prettify添加行号的方法

要为Google Prettify添加行号，我们需要修改CSS样式。以下是具体步骤：

安装Google Prettify库：首先，我们需要在网页中引入Google Prettify库。您可以从Google Prettify的官方网站（https://github.com/google/code-prettify）下载最新版本的库或使用CDN（内容分发网络）引入库。

<script src="https://cdn.jsdelivr.net/gh/google/[email protected]/run_prettify.js"></script>

添加CSS样式：利用CSS样式来为Google Prettify的代码块添加行号。下面是一个基本的示例样式：

.prettyprint {
  position: relative;
  padding-left: 70px; /* 为行号留出空间 */
}

.prettyprint li:before {
  content: counter(linenumber);
  counter-increment: linenumber;
  position: absolute;
  left: 0;
  top: 0;
  width: 60px; /* 定义行号宽度 */
  text-align: right;
  color: #999; /* 设置行号颜色 */
  font-size: 14px;
  line-height: 1.4;
}

在上面的示例中，我们首先为父容器.prettyprint设置了相对定位，并为左侧预留了70px的空间，以便显示行号。然后，我们使用:before伪元素为每一行添加行号。我们通过counter属性和counter-increment属性来计数行号，并使用position属性将行号定位到左上角。最后，我们通过设置width、text-align、color、font-size和line-height属性来定义行号的样式。

将CSS样式应用到Google Prettify的代码块：在您需要使用Google Prettify的代码块上添加class=”prettyprint”属性，并引入刚才定义的CSS样式。

<pre class="prettyprint">
  <code>
    // 这里是您的代码
  </code>
</pre>

通过上述步骤，您就可以为Google Prettify中的所有行添加行号了。

示例

让我们通过一个示例来演示如何在Google Prettify中添加行号：

<!DOCTYPE html>
<html>
<head>
  <title>Google Prettify行号示例</title>
  <link rel="stylesheet" type="text/css" href="prettify.css">
  <style>
    .prettyprint {
      position: relative;
      padding-left: 70px;
    }

    .prettyprint li:before {
      content: counter(linenumber);
      counter-increment: linenumber;
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      text-align: right;
      color: #999;
      font-size: 14px;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <pre class="prettyprint">
    <code>
      function greet(name) {
        console.log("Hello, " + name + "!");
      }

      greet("World");
    </code>
  </pre>
  <script src="prettify.js"></script>
  <script>
    // 在页面加载完成后执行Google Prettify
    document.addEventListener("DOMContentLoaded", function() {
      prettyPrint();
    });
  </script>
</body>
</html>

在上面的示例中，我们引入了Google Prettify的CSS文件和JavaScript文件，并在页面加载完成后执行了prettyPrint()以初始化Google Prettify。我们使用了之前定义的CSS样式，为代码块中的每一行添加了行号。

打开浏览器，您就会看到带有行号的Google Prettify代码块。