给代码添加行号
在代码中添加行号可以更轻松地进行阅读和调试。传统方法是使用<xmp>标签，但由于它已被弃用，因此可以使用更现代的方法。
使用<pre>标签和转义字符
<pre>标签可以保留空白和换行符，但需要将HTML代码中的<和>符号转义为<和>。这种方法较为繁琐。
使用CSS和<p>标签
一种更简单的解决方案是使用CSS和<p>标签：
<div id="code" style="font-size: 12px"></div>
<style>
* { margin: 0; padding: 0; }
#code p::before {
content: attr(data-line-number);
min-width: 50px;
text-align: right;
display: inline-block;
padding: 0 5px;
color: #ccc;
}
</style>
<script>
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);
});
</script>
