如何强制浏览器刷新CSS计数器？Quill编辑器代码块行号异常

方法1：触发元素重绘 #

Chrome对CSS计数器的更新存在延迟，可通过强制元素重绘来触发计数器重新计算。在代码块内容变更后执行以下操作：

const codeBlock = document.querySelector('.ql-syntax'); // 替换为你的代码块选择器
// 临时修改display触发重绘
codeBlock.style.display = 'none';
requestAnimationFrame(() => {
  codeBlock.style.display = '';
});

原理是短暂改变元素的显示状态，迫使浏览器重新渲染该元素及其子元素，从而重置行号计数器。

方法2：动态切换计数器重置类 #

通过给代码块容器添加/移除临时类，触发CSS计数器规则的重新解析：

1. 先添加对应的CSS规则：

.reset-counter {
  counter-reset: line 0; /* 与你原有的计数器名称保持一致 */
}

2. 在内容变更时执行JS：

const codeBlock = document.querySelector('.ql-syntax');
codeBlock.classList.add('reset-counter');
requestAnimationFrame(() => {
  codeBlock.classList.remove('reset-counter');
});

方法3：绑定Quill文本变更事件 #

将重绘逻辑绑定到Quill的text-change事件，确保用户每次修改内容后都自动刷新行号：

quill.on('text-change', (delta, oldDelta, source) => {
  // 仅处理用户主动操作的内容变更
  if (source !== 'user') return;
  
  document.querySelectorAll('.ql-syntax').forEach(block => {
    block.style.display = 'none';
    requestAnimationFrame(() => {
      block.style.display = '';
    });
  });
});

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