如何使用 CSS 和 JavaScript 为代码添加行号？
如何轻松地给代码添加行号
为代码添加行号往往是一项繁琐的任务，尤其是在需要显示精美的格式时。对于这种场景，一种简单又方便的方法是使用 CSS 的 ::before 伪元素。
在需要添加行号的
元素中，添加以下 CSS 样式：#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('
').forEach((text, index) => {
var $line = document.createElement('p');
$line.dataset.lineNumber = index + 1;
$line.innerText = text;
$code.appendChild($line);
});通过这种方式，您可以轻松地为代码添加行号，并根据需要自定义其外观。
以上就是如何使用 CSS 和 JavaScript 为代码添加行号？的详细内容，更多请关注其它相关文章！