如何在HTML/CSS/JSS中实现VS Code风格的垂直行号？

数据老陈

2026-6-26

实现VS Code风格的垂直行号功能

核心思路

将行号区域与代码编辑区域拆分为两个独立容器，保持两者行高、字体完全匹配，同步滚动状态，动态根据编辑内容生成对应行号。

具体实现步骤

1. 布局结构

用弹性布局让行号容器与编辑容器并排，行号容器固定宽度，编辑容器占满剩余空间：

<div class="editor-container">
  <div class="line-numbers" id="lineNumbers"></div>
  <textarea class="code-editor" id="codeEditor"></textarea>
</div>

2. 样式对齐

通过CSS确保行号与代码行高度一致，行号区域设为不可选中，用背景色区分：

.editor-container {
  display: flex;
  font-family: 'Consolas', 'Monaco', monospace;
}
.line-numbers {
  width: 48px;
  background-color: #f6f6f6;
  padding: 8px 6px 8px 0;
  text-align: right;
  user-select: none;
  line-height: 1.6;
  font-size: 14px;
}
.code-editor {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 8px;
  line-height: 1.6;
  font-size: 14px;
  background-color: #ffffff;
}

3. 动态生成与滚动同步

用JavaScript监听编辑内容变化和滚动事件，实时更新行号并同步滚动位置：

const codeEditor = document.getElementById('codeEditor');
const lineNumbers = document.getElementById('lineNumbers');

// 更新行号列表
function refreshLineNumbers() {
  const lineCount = codeEditor.value.split('\n').length;
  let numberHtml = '';
  for (let i = 1; i <= lineCount; i++) {
    numberHtml += `<div>${i}</div>`;
  }
  lineNumbers.innerHTML = numberHtml;
  // 同步滚动位置
  lineNumbers.scrollTop = codeEditor.scrollTop;
}

// 绑定事件
codeEditor.addEventListener('input', refreshLineNumbers);
codeEditor.addEventListener('scroll', () => {
  lineNumbers.scrollTop = codeEditor.scrollTop;
});

// 初始化行号
refreshLineNumbers();