CODEWITHSUNDEEP
javascripthtmlquillkatex
user16570427
user16570427

Reputation:

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?

Upvotes: 0

Views: 1320

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21374

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).

Upvotes: 1

Related Questions