给代码添加行号
在代码中添加行号可以更轻松地进行阅读和调试。传统方法是使用
标签，但由于它已被弃用，因此可以使用更现代的方法。<p><strong>使用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false”>标签和转义字符&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;标签可以保留空白和换行符，但需要将HTML代码中的&lt;和&gt;符号转义为&lt;和&gt;。这种方法较为繁琐。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;使用CSS和&lt;p&gt;标签&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;一种更简单的解决方案是使用CSS和&lt;p&gt;标签：&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;div id=&quot;code&quot; style=&quot;font-size: 12px&quot;&gt;&lt;/div&gt; &lt;style&gt; * { 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; } &lt;/style&gt; &lt;script&gt; var $code = document.getElementById(‘code’); `&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;行号&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;测试页面&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;`.split(‘ ‘).forEach((text, index) =&gt; { var $line = document.createElement(‘p’); $line.dataset.lineNumber = index + 1; $line.innerText = text; $code.appendChild($line); }); &lt;/script&gt;</pre><div class=”contentsignin”>登录后复制</div></div></strong></p>
以上就是如何为网页代码添加行号？的详细内容，更多请关注GTHOST其它相关文章！
