如何使用 CSS 和 JavaScript 为代码添加行号？

#code p::before {
  content: attr(data-line-number);
  min-width: 50px;
  text-align: right;
  display: inline-block;
  padding: 0 5px;
  color: #ccc;
}

接下来，使用 JavaScript 遍历代码并为每行添加一个

元素：

var $code = document.getElementById('code');
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行号</title>
</head>
<body>
    <p>测试页面</p>
</body>
</html>`.split('\n').forEach((text, index) => {
  var $line = document.createElement('p');
  $line.dataset.lineNumber = index + 1;
  $line.innerText = text;
  $code.appendChild($line);
});

通过这种方式，您可以轻松地为代码添加行号，并根据需要自定义其外观。

终于介绍完啦！小伙伴们，这篇关于《如何使用 CSS 和 JavaScript 为代码添加行号？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！