Weird plain-text duplication in MDX after LaTeX equation

Question

I am trying to integrate the MDX with remark-math and rehype-katex plugin on Next.js. However, after I successfully added the plugins, there are a plain-text duplication after the equation. Here is the MDX file code:

# Hello

My name $x^2+2x+1$

1. dd
2. aa
3. aaaaaa

The result is as follows:

Duplication of plain-text

I suspected that by using the aligned environment in LaTeX solve the problem. But are there any better solution? Thanks!

Answer 1

I got where the problems are! The katex.min.css must be included in the head tag...

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
      integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc"
      crossOrigin="anonymous"
    />