如何最方便地给代码加行号？

站长

2024年07月12日 09:18 · 阅读数 15

一段简单的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行号</title>
</head>
<body>
    <p>测试页面</p>
</body>
</html>

我想给它加行号，形成下面的形式

如何最方便地给代码加行号？

使用xmp标签是最简单的做法：css 部分

    div {
      counter-reset: myCounter;
    }
    xmp::before {
      counter-increment: myCounter 1;
      content: counter(myCounter) '.';
    }

html部分

<div>
<xmp><!DOCTYPE html></xmp>
<xmp><html lang="en"></xmp>
<xmp><head></xmp>
<xmp>    <meta charset="UTF-8"></xmp>
<xmp>    <title>行号</title></xmp>
<xmp></head></xmp>
<xmp><body></xmp>
<xmp>    <p>测试页面</p></xmp>
<xmp></body></xmp>
<xmp></html></xmp>
</div>

xmp不是废弃了吗，我就改用pre,这下麻烦了html部分需要将<>分别转义成

&lt;
&gt;

下面的形式

<div>
<pre>&lt;!DOCTYPE html&gt;</pre>
<pre>&lt;html lang="en"&gt;</pre>
<pre>&lt;head&gt;</pre>
<pre>    &lt;meta charset="UTF-8"&gt;</pre>
<pre>    &lt;title&gt;行号</title></pre>
<pre>&lt;/head&gt;</pre>
<pre>&lt;body&gt;</pre>
<pre>    &lt;p&gt;测试页面</p></pre>
<pre>&lt;/body&gt;</pre>
<pre>&lt;/html&gt;</pre>
</div>

好麻烦，有无简单的js方案来做？

回复

1个回答

test

2024-07-12

<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 html>
<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>

回复

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容