Quill.js（基于KaTeX）输入的公式在HTML中重复渲染问题问询

1. 缺失KaTeX官方配套CSS #

KaTeX渲染公式时默认生成两个节点：katex-mathml用于无障碍屏幕阅读器识别，katex-html用于用户视觉展示。官方配套CSS会默认将katex-mathml设为视觉隐藏状态，仅保留katex-html可见。你当前的场景是两个节点同时可见，大概率是没有正确引入KaTeX的样式文件，或者引入的样式被全局样式覆盖，导致本该隐藏的节点也显示在页面上。

2. 二次渲染逻辑冲突 #

Quill内置的公式模块已经会将编辑器内的公式内容渲染为标准KaTeX结构，如果你在将编辑器内容导出到独立页面展示时，额外调用了katex.render方法，或者开启了全局KaTeX自动渲染脚本扫描页面内容，就会对已经渲染完成的公式节点做二次处理，额外生成重复的渲染结构，最终出现两份公式同时显示的问题。

3. 全局样式强制覆盖 #

检查项目的全局CSS规则，是否存在对span元素、.katex类下的子元素设置了display: block !important、visibility: visible !important这类强制生效的样式，这类规则会覆盖KaTeX默认对aria-hidden="true"元素的隐藏逻辑，导致本该隐藏的节点可见。

• 先在页面头部引入KaTeX官方样式，验证是否是样式缺失问题
• 排查页面JS逻辑，确认仅对公式内容执行一次渲染，不要同时开启Quill内置公式渲染和页面全局自动渲染
• 打开浏览器开发者工具，选中可见的katex-html节点，查看样式面板中是否有其他样式覆盖了KaTeX的默认隐藏规则

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