登录
首页 >  文章 >  前端

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

时间：2024-11-03 13:15:55 126浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端，安全直达

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《如何用 JavaScript 为代码添加行号？ 》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

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

如何在代码中便捷地添加行号？

xmp 标签是早期为实现这一目的而使用的一种方法。然而，由于 xmp 已被弃用，需要寻找替代方案。

使用 JavaScript

将以下代码添加到 HTML 文件中：

<div id="code" style="font-size:12px"></div>

然后在 HTML 文件的末尾添加以下样式和 JavaScript 代码：

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

此代码会将代码分割成行并将其添加到指定 div 中。每行前添加一个带有行号的元素。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何用 JavaScript 为代码添加行号？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>