How to add line numbers to code in web pages gracefully?

Elegant solution for web code line numbers

In web development, it is crucial to clearly display code snippets, while adding line numbers can significantly improve the readability and debugging efficiency of the code. This article will introduce a simple and efficient JavaScript method that elegantly adds line numbers to the code and avoids the use of outdated ones. <xmp></xmp>标签以及复杂的转义操作。

许多开发者尝试过使用<xmp></xmp>或标签添加行号，但都面临挑战：`<xmp>`标签已被标记为过时，不推荐使用；而</xmp>标签则需要对代码中的特殊字符进行转义，增加了代码的复杂性和维护成本。

因此，我们推荐一种基于JavaScript的方案。该方案的核心思想是：将代码字符串按行分割成数组，然后用JavaScript循环遍历数组，为每一行创建一个<p></p>元素，并利用CSS控制行号的样式。

实现步骤：

1. HTML结构: 在HTML中，创建一个容器元素（例如一个div），用于存放带行号的代码。

   <div id="code" style="font-size:12px"></div>

2. CSS样式: 定义行号的样式，例如：

   * {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;}

3. JavaScript代码: 这段JavaScript代码将代码字符串按行分割，并为每一行创建一个<p></p>元素，添加行号和代码内容，最后将这些<p></p>元素添加到HTML容器中。

   var $code = document.getElementById('code'); `<meta charset="UTF-8"><title>行号</title><p>测试页面</p>`.split('\n').forEach((text, index) => { var $line = document.createElement('p'); $line.dataset.lineNumber = index 1; $line.innerText = text; $code.appendChild($line); });

通过以上步骤，即可轻松优雅地为网页代码添加行号，提升代码的可读性和维护性。 这种方法避免了繁琐的转义操作，并具有良好的可维护性。

The above is the detailed content of How to add line numbers to code in web pages gracefully?. For more information, please follow other related articles on the PHP Chinese website!