Obsidian预览模式使用CSS counter加段落行号滚动时计数异常问题

问题原因 #

Obsidian 预览（含实时预览）模式默认启用虚拟滚动机制，仅在DOM树中保留可视区域及附近少量段落节点，超出可视范围的节点会被JS主动卸载。CSS计数器仅能统计当前真实存在于DOM树中的元素，被卸载的<p>标签不会被计入，完全匹配你观察到的滚动时计数波动、最大数值远低于实际行数的现象。
选中文本时计数正常，是因为Obsidian为了保证选中状态可用，会临时保留选中范围内的所有DOM节点不被卸载，计数器可以统计到完整的选中段落。

仅CSS解决方案 #

虚拟滚动是JS层面的渲染逻辑，CSS无法直接干预DOM节点的挂载/卸载，你可以通过以下调整适配Obsidian的渲染规则：

1. 替换计数器绑定容器为不会被虚拟滚动卸载的笔记预览顶层容器，同时改用兼容性更好的counter-reset替代counter-set，避免滚动时意外触发计数器重置
2. 调整计数规则，将计数递增逻辑绑定到<p>元素本身而非伪元素，避免伪元素渲染延迟导致的计数异常

适配阅读模式的代码：

/* 绑定计数器到单篇笔记的顶层预览容器，不会被虚拟滚动卸载 */
.markdown-preview-view {
    counter-reset: line 0;
    padding-left: 3em; /* 给行号预留空间，避免和内容重叠 */
}

/* 计数递增绑定到p元素本身 */
.markdown-preview-view p {
    counter-increment: line;
    position: relative;
}

.markdown-preview-view p::before {
    content: counter(line);
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: var(--text-faint);
}

如果你需要在实时预览（编辑模式预览）下生效，将代码中所有的.markdown-preview-view替换为.markdown-source-view即可。

如果调整后仍然存在计数异常，可在Obsidian设置中关闭「实时预览」，切换到传统的全量渲染阅读模式，该模式下不会卸载任何DOM节点，计数器可以100%正常工作。

内容的提问来源于stack exchange，提问作者emand