如何用JavaScript优雅地在网页中为代码添加行号？

网页代码行号的优雅解决方案

在网页中展示代码时，清晰的行号能显著提升可读性和调试效率。本文介绍一种简洁高效的JavaScript方法，轻松为代码添加行号，无需繁琐的HTML和CSS操作。

一些传统方法，例如使用

标签或标签添加行号，存在问题：标签已废弃，而标签需要进行HTML实体转义，操作复杂且易出错。

因此，我们推荐使用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');  `// 代码字符串`.split('n').forEach((text, index) => {    var $line = document.createElement('p');    $line.dataset.lineNumber = index + 1;    $line.innerText = text;    $code.appendChild($line);  });</script>

登录后复制