React-Latex Repeats the text

Question

I'm trying to use the package react-latex to create pretty mathematical notation. Whenever I type the latex string, it repeats the text twice - once in pretty latex rendering, once in non-pretty latex rendering. For example the code below produces the text twice once as an exponent and once as an ugly "a2"

import Latex from 'react-latex'
export default function Home() {
  <div>
    <Latex> $$\a^2 $$</Latex>
  </div>
}

Answer 1

Looks like there is an 'output' option. It displays both by default.

https://katex.org/docs/options.html

The docs for the react component aren't very clear but maybe try

<Latex output="mathml"> $$\a^2 $$</Latex>

Answer 2

In LaTeX, to represent an exponent, you should use the caret (^) symbol followed by the exponent value. However, in your code, you are using a backslash () before the letter "a", which is causing the duplication.

import Latex from 'react-latex';

export default function Home() {
  return (
    <div>
      <Latex> $$a^2$$ </Latex>
    </div>
  );
}

Hope this helps :)

Answer 3

Install katex and react-katex packages and that will solve it