如何修复Highlight.js代码区域文本行与行号的对齐问题且不破坏光标？

云上老周

2026-7-2

解决方案

统一排版参数：给黑色代码面板的内容容器设置与.numbers完全一致的line-height:1.3和font-size:15px，确保行号与代码文本的排版基线、行高完全匹配，从根源避免行错位。
清除Highlight.js自带顶部空白：该库默认会给代码块添加额外的内边距或外边距，直接通过CSS覆盖清除，且不修改可能影响光标位置的容器边距：
```
.hljs {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}
```
强制基线对齐：如果行号与代码行采用行内/行内块布局，给两者同时设置vertical-align: baseline，确保每一行文本的基线完全重合，此操作不会改变容器布局，因此不会破坏光标位置。
清理HTML结构间隙：检查行号容器与代码容器的HTML结构，确保两者之间没有多余的换行或空白字符，避免浏览器自动渲染出额外的水平/垂直间隙，例如：
```
<div class="numbers">...</div><div class="code-container">...</div>
```