javascript代码行号的优雅解决方案
在网页中展示代码时，清晰的行号对于代码的可读性和调试效率至关重要。本文介绍一种高效的JavaScript方法，帮助您轻松为代码添加行号，避免繁琐的HTML标记和转义操作。
挑战：简化代码行号添加
直接在HTML中添加行号既费时又容易出错。<xmp></xmp>标签已过时，而使用代码块标签则需要对HTML代码进行转义，过程复杂且容易出错。
解决方案：JavaScript动态生成行号
立即学习“Java免费学习笔记（深入）”；
利用JavaScript，我们可以动态地为代码添加行号，实现更简洁高效的方案。以下代码片段演示了该方法：
<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');
`<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>
这段代码首先创建一个<div>元素作为代码容器，并使用内联样式设置字体大小。然后，CSS样式定义了行号的显示样式，包括宽度、对齐方式、内边距和颜色。JavaScript代码将HTML代码按行分割成数组，循环遍历每个元素，创建<code><p></p>元素，并将行号作为data-line-number属性和文本内容添加到<p></p>元素中，最后将<p></p>元素添加到代码容器。
这种方法避免了手动添加HTML标记和转义字符的麻烦，使添加行号的过程更加简洁高效。
