用CSS和JavaScript给代码添加行号的方法

技术文摘

2025-01-09 16:42:02 小编

在编程过程中，给代码添加行号能够极大地提升代码的可读性和调试效率。本文将详细介绍如何使用 CSS 和 JavaScript 给代码添加行号。

我们需要构建 HTML 结构。创建一个包含代码块的 HTML 文件，代码块可以使用 <pre> 标签来包裹，<pre> 标签会保留代码中的空格和换行。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码行号示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <pre id="code-block">
        function add(a, b) {
            return a + b;
        }
        const result = add(3, 5);
        console.log(result);
    </pre>
    <script src="script.js"></script>
</body>
</html>

接着，利用 CSS 来美化代码块和行号的样式。在 CSS 文件（styles.css）中，我们可以设置代码块的字体、背景颜色等样式，同时创建一个伪元素来显示行号。

#code-block {
    font-family: monospace;
    background-color: #f8f8f8;
    padding: 10px;
    counter-reset: line;
}
#code-block::before {
    counter-increment: line;
    content: counter(line) ". ";
    display: inline-block;
    width: 2em;
    margin-right: 10px;
    color: #999;
    text-align: right;
}

最后，使用 JavaScript 动态生成行号。在 JavaScript 文件（script.js）中，我们可以获取代码块的每一行，然后为每一行添加行号。

const codeBlock = document.getElementById('code-block');
const lines = codeBlock.textContent.split('\n');
let newContent = '';
for (let i = 0; i < lines.length; i++) {
    newContent += (i + 1) + '. ' + lines[i] + '\n';
}
codeBlock.textContent = newContent;

通过上述步骤，我们成功地使用 CSS 和 JavaScript 给代码添加了行号。CSS 为行号提供了美观的样式，而 JavaScript 则实现了动态生成行号的功能。这种方法不仅适用于简单的代码示例，也可以应用到大型代码库中，帮助开发者更高效地阅读和调试代码。掌握这一技巧，能够在日常编程工作中节省大量时间和精力，提升开发效率。

TAGS: CSS JavaScript 代码美化代码行号添加

万千站长工具

技术文摘

用CSS和JavaScript给代码添加行号的方法

欢迎使用万千站长工具！