MDEditor.Markdown doesn't support KaTeX code

[icimence]

现在的Preview Markdown不支持使用KaTeX对数学公式进行渲染，有这个计划吗

[jaywcjlove]

<MDEditor.Markdown source={value} renderers={renderers} />

以相同的方式支持。如果你只想使用 预览 Markdown，可以使用 @uiw/react-markdown-preview

@icimence

[icimence]

code sandbox 中Katex预览的示例代码好像又不行了，现在是白屏，不会渲染任何内容

[jaywcjlove]

@icimence 你可以把示例拷贝下去运行，我这边突然无法运行，被和谐了 编辑器打不开，明天到公司看能不能打开。

[icimence]

自己的本地项目使用成功了，感谢

[pcxxiaoxiao]

试了下KaTeX在review模式里还是不能渲染，是使用方式不对吗 const mdKaTeX = This is to display the \$$c = \pm\sqrt{a^2 + b^2}$$` in one line ```KaTeX c = \pm\sqrt{a^2 + b^2} ``` ```KaTeX \f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x} \,d\xi ``` `;

[jaywcjlove]

@pcxxiaoxiao https://codesandbox.io/embed/support-custom-katex-preview-106-1no4c?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import MDEditor from "@uiw/react-md-editor";
import katex from "katex";
import "katex/dist/katex.css";

const mdKaTeX = `This is to display the 
\`$$c = \\pm\\sqrt{a^2 + b^2}$$\`
 in one line

\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\`\`\`
`;

export default function App() {
  return (
    <div className="container">
      <MDEditor.Markdown
        source={mdKaTeX}
        components={{
          code: ({ inline, children, className, ...props }) => {
            const txt = children[0] || "";
            if (inline) {
              if (typeof txt === "string" && /^\$\$(.*)\$\$/.test(txt)) {
                const html = katex.renderToString(
                  txt.replace(/^\$\$(.*)\$\$/, "$1"),
                  {
                    throwOnError: false
                  }
                );
                return <code dangerouslySetInnerHTML={{ __html: html }} />;
              }
              return <code>{txt}</code>;
            }
            if (
              typeof txt === "string" &&
              typeof className === "string" &&
              /^language-katex/.test(className.toLocaleLowerCase())
            ) {
              const html = katex.renderToString(txt, {
                throwOnError: false
              });
              console.log("props", txt, className, props);
              return <code dangerouslySetInnerHTML={{ __html: html }} />;
            }
            return <code className={String(className)}>{txt}</code>;
          }
        }}
      />
    </div>
  );
}

[pcxxiaoxiao]

可以了，感谢！！！

[piush-terminalwitchcraft]

@jaywcjlove it doesnt work for inline-katex, what to do?

[jaywcjlove]

@piush-terminalwitchcraft I updated the example, the v4 version dependency package api has changed