Not parsing LaTex syntax correctly

[jatindograck12]

Scenario: react-markdown Fails to Parse Specific LaTeX Content

I've encountered an issue where the react-markdown library fails to properly render LaTeX content generated through LLMs (Large Language Models). The content seems valid, but the LaTeX fails to render correctly. Here’s the scenario:

When trying to display a simple LaTeX block using react-markdown with rehype-katex and remark-math, the output does not render as expected. The issue appears when dealing with multi-line LaTeX expressions generated in a markdown file, specifically ones formatted in an array environment.

Here's the code that demonstrates the problem:

import Markdown from "react-markdown";
import rehypeKatex from "rehype-katex";
import remarkMath from "remark-math";
import "katex/dist/katex.min.css";

const content = `
Sure! Let's subtract two 4-digit numbers: 7532 and 4867.

Step-by-step:

1. **Align the numbers by place value:**
   $$
   \\begin{array}{r}
   7532 \\\\
  -4867 \\\\
   \\hline
   \\end{array}
   $$

2. **Align the numbers by place value:**
`;

export default function App() {
  return (
    <div className="App">
      <Markdown remarkPlugins={[[remarkMath]]} rehypePlugins={[rehypeKatex]}>
        {content}
      </Markdown>
    </div>
  );
}

Output

The problem specifically occurs with the LaTeX array environment, where the numbers and symbols don’t align as they should in the final output.

Reproducible Example

You can reproduce the issue by checking out this CodeSandbox example.

Is this a valid issue with the react-markdown library's parsing, or could there be an issue with the LaTeX syntax itself? Any feedback or thoughts would be appreciated!

Thanks!

[wooorm]

Your whitespace is off, in to the list. Change your markdown and see it work.

This follows how markdown works. You can also see it with:

1. a
   ```js
   b
  -c
   ```

d

1. a

   b

-c

d