在 ReactMarkdown 中访问对齐环境

Question

在 ReactMarkdown 中访问对齐环境。

我希望能够阅读 markdown 文档并在网站上呈现它们（我想我必须做一些预处理，所以如果这不完全可行，请不要担心）。

我现在正在努力解决的问题之一是让 ReactMarkdown 识别方程式对齐环境或找到等效项。例如。我写的一些乱码是

markdown = `The equation for a line is $y = mx +b$.
            The proof is:

            \begin{align}
             y &= mx + b \\
               &= ab + c  
            \end{align}
        `
<ReactMarkdown
   remarkPlugins={[remarkMath]}
   rehypePlugins={[rehypeKatex]}
   children={markdown}
/>

但这不起作用...

我也尝试用 $$ 替换 \begin{align} 和 \end{align}，结果相似。

我通读了 repo and couldn't find anything addressing it. I also read through the plugin pages (here and here)，但没有找到任何有希望的东西。

我是不是遗漏了什么或者没有类似对齐的环境可用？

Answer 1

我真的无法解释为什么，但是将对齐环境包装在显示模式中 $$ 更重要的是 导入 KaTeX 样式表 至少可以让它工作在 CodeSandbox React 沙箱中测试时：

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

const markdown = `The equation for a line is $y = mx +b$.
The proof is:

$$
\begin{align}
 y &= mx + b \\
   &= ab + c  
\end{align}
$$
`;

export default function App() {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeKatex]}
      children={markdown}
    />
  );
}

在 ReactMarkdown 中访问对齐环境

Accessing align environment in ReactMarkdown

markdown

reactjs