CODEWITHSUNDEEP
reactjskatexremarkjsreact-markdown
Niresh
Niresh

Reputation: 77

Issue in rendering Latex in React using React-Markdown

I am trying to render a content in that is in latex. The rendering is done in react using the react-markdown component, but I see some errors as mentioned below.

Also the latex contents are wrapped in between latex$$ and $$latex for more robustness

Here is the code that is actually used to render the content. The stuff inside the String.raw is the actual content that I am trying to render.

<Markdown
              key={index}
              remarkPlugins={[remarkGfm, remarkMath]}
              rehypePlugins={[rehypeRaw, rehypeKatex]}
            >
              {String.raw`  _latex$$  {}^{\\mathrm{*}} $$latex_ <!-- tag: 401 -->  The materials should not sorb, react, or interfere with the specimen being tested. <!-- tag: 402 --> _latex$$  { }^{\\mathrm{*}}{ }^{2} $$latex_`
                      .replace(
                        /_latex\$\$(.*?)\$\$latex_/gs,
                        "<span class='math-inline'>$1</span>"
                      )

                      // .replace(/\^{1}/g, '')
                      // .replace(/\^(\{[\*\d]+\})/g, '^{1$1}')

                      .replace(/(<br\s*\/?>\s*){2,}/g, "<br>")
                      .replace(/\^{([^}]*)}\s*\^{([^}]*)}/g, "^{$1$2}")
              }`}
            </Markdown>

The error I am getting is

ParseError: KaTeX parse error: Unexpected end of input in a macro argument, expected '}' at end of input: { }^{\mathrm{

Upvotes: 0

Views: 106

Answers (0)

Related Questions