Search code examples
javascripthtmlquillkatex

Formula typed in quill.js not rendering correctly in html

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?

Solution

  • 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/[email protected]/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).