给代码添加行号
在代码中添加行号可以更轻松地进行阅读和调试。传统方法是使用
<![CDATA[标签，但由于它已被弃用，因此可以使用更现代的方法。<p><strong>使用<pre>标签和转义字符</strong></p><p><pre>标签可以保留空白和换行符，但需要将HTML代码中的<和>符号转义为<和>。这种方法较为繁琐。</p><p><strong>使用<a href="/tag-news-name-CSS-p-1.html">CSS</a>和<p>标签</strong></p><p>一种更简单的解决方案是使用<a href="/tag-news-name-CSS-p-1.html">CSS</a>和<p>标签：</p><pre><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<a href="/tag-news-name-+html-p-1.html"> html</a>>
<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);
});
</script></pre></strong></p>]]>以上就是如何为网页代码添加行号？的详细内容，更多请关注其它相关文章！
