如何使用 CSS 和 JavaScript 为代码添加行号？-html教程-PHP中文网

如何使用 CSS 和 JavaScript 为代码添加行号？

花韻仙語

发布： 2024-11-03 08:09:35

原创

333人浏览过

如何使用 CSS 和 JavaScript 为代码添加行号？

如何轻松地给代码添加行号

为代码添加行号往往是一项繁琐的任务，尤其是在需要显示精美的格式时。对于这种场景，一种简单又方便的方法是使用 CSS 的 ::before 伪元素。

在需要添加行号的 <div> 元素中，添加以下 CSS 样式：

#code p::before {
  content: attr(data-line-number);
  min-width: 50px;
  text-align: right;
  display: inline-block;
  padding: 0 5px;
  color: #ccc;
}

登录后复制

接下来，使用 JavaScript 遍历代码并为每行添加一个 <p> 元素：

var $code = document.getElementById('code');
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行号</title>
</head>
<body>
    <p>测试页面</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/735">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cdbf48df2598.png" alt="代码小浣熊">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/735">代码小浣熊</a>
                            <p>代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="代码小浣熊">
                                <span>51</span>
                            </div>
                        </div>
                        <a href="/ai/735" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="代码小浣熊">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
</body>
</html>`.split('\n').forEach((text, index) => {
  var $line = document.createElement('p');
  $line.dataset.lineNumber = index + 1;
  $line.innerText = text;
  $code.appendChild($line);
});

登录后复制

通过这种方式，您可以轻松地为代码添加行号，并根据需要自定义其外观。

以上就是如何使用 CSS 和 JavaScript 为代码添加行号？的详细内容，更多请关注php中文网其它相关文章！