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

测试页面

</body> </html>`.split(' ').forEach((text, index) => { var $line = document.createElement('p'); $line.dataset.lineNumber = index + 1; $line.innerText = text; $code.appendChild($line); });
登录后复制

示例

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

[removed] // 代码段在此处 [removed]
登录后复制

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 简便地为代码添加行号?的详细内容,更多请关注慧达安全导航其它相关文章!

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部