在 quill.js 中输入的公式在 html 中无法正确呈现

Question

我在 Quill.js 中输入数学公式（使用 KaTeX）并将其渲染为 html。但是公式似乎渲染了两次。

当我检查HTML时，每个部分对应两个跨度元素。正确的是 class“katex-mathml”，另一个是 class“katex-html”，属性“aria-hidden”设置为 true，并且在页面上仍然可见。这是怎么回事？

Answer 1

这是 Katex 的默认行为。来自 https://katex.org/docs/options.html:

output: string. Determines the markup language of the output. The valid choices are:

html: Outputs KaTeX in HTML only.
mathml: Outputs KaTeX in MathML only.
htmlAndMathml: Outputs HTML for visual rendering and includes MathML for accessibility. This is the default.

您是否可能只是缺少包含 katex css？

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">

否则你的选择是：

指定 katex 选项只生成 html 或 mathml（不是两者），或
手动添加 css 规则 katex-html { display: none; }（或类似于 mathml）。

在 quill.js 中输入的公式在 html 中无法正确呈现

Formula typed in quill.js not rendering correctly in html

javascript

html

quill

katex