I am typing math formulae in Quill.js (uses KaTeX) and rendering it as an html. However the formula seems to be rendering twice.

When I inspected the HTML, there are two span elements corresponding to each part. The correct one has class “katex-mathml” and another has the class “katex-html” with attribute “aria-hidden” set to true and still is visible on the page. What is going on here?

## Answer

That’s the default behavior of Katex. From 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.

Are you perhaps just missing to include the 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">

Otherwise your options are:

- specify the katex option to only produce html or mathml (not both), or
- manually add a css rule
`katex-html { display: none; }`

(or analogously for mathml).