Normal text also showing up alongwith rendered LaTeX

[gurbaaz27]

First of all, thank you for this easy-to-use great package!

I am using this to render some text in $\LaTeX$, and I don't know why but the rendered page is showing both the mathematical expression in LaTeX form as well as normal text form.

NextJS Code Snippet:

import Latex from "react-latex-next"

...
<p className="py-6 text-base sm:text-lg"><Latex>{problem.description || ""}</Latex></p>
...

where

problem.description = "You are given an urn with 100 balls (50 black and 50 white). You pick balls from urn one by one without replacements until all the balls are out. A black followed by a white or a white followed by a black is "a colour change". Calculate the expected number of colour changes if the balls are being picked randomly from the urn. $3x + 2 = 5$"

Any help would be appreciated.

[harunurhan]

Can you copy paste the raw text that you are passing down to the Latex component?

@gurbaaz27

[gurbaaz27]

Raw text of problem description is

You are given an urn with 100 balls (50 black and 50 white). You pick balls from urn one by one without
replacements until all the balls are out. A black followed by a white or a white followed by a black is 
"a colour change". Calculate the expected number of colour changes if the balls are being picked
randomly from the urn. $3x + 2 = 5$

[harunurhan]

I copy-pasted this to the playground, looks like it is working as expected.

And here you can see the code as a reference how playground is rendering the text input: https://github.com/harunurhan/react-latex-next/blob/master/example/src/App.js

[groupsvkg]

I had the similar issue. To fix this I installed katex package and imported import 'katex/dist/katex.min.css'

[harunurhan]

Thanks! this is part of the README but perhaps I could make it a bit more obvious.