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

如何使用 JavaScript 简便地为代码添加行号？

碧海醫心

发布： 2024-11-02 22:33:42

原创

1022人浏览过

如何使用 JavaScript 简便地为代码添加行号？

用 javascript 最简便地给代码加行号

给代码加行号对于代码审查、调试和其他任务来说非常有用。虽然有几种方法可以实现这一目标，但 JavaScript 提供了一个简单的解决方案，可以让这个过程变得轻而易举。

使用 xmp 标签

使用 xmp 标签是给代码加行号最简单的方法之一。但是，xmp 已被标记为废弃，不建议在新的项目中使用。

使用 pre 标签

立即学习“Java免费学习笔记（深入）”；

虽然可以用 pre 标签代替 xmp，但它需要对代码进行转义，使得它变得更加复杂。

使用 JavaScript

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

相比之下，JavaScript 提供了一种优雅且简单的解决方案，不需要对代码进行任何修改。只需使用以下代码段：

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);
});

登录后复制

示例

将此代码段添加到 HTML 文档中，它将获取具有 ID 为 "code" 的元素并为其添加行号：

<div id="code" style="font-size:12px"></div>
<script>
  // 代码段在此处
</script>

登录后复制

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

登录后复制

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