Closed icimence closed 3 years ago
<MDEditor.Markdown source={value} renderers={renderers} />
以相同的方式支持。如果你只想使用 预览 Markdown,可以使用 @uiw/react-markdown-preview
@icimence
code sandbox 中Katex预览的示例代码好像又不行了,现在是白屏,不会渲染任何内容
@icimence 你可以把示例拷贝下去运行,我这边突然无法运行,被和谐了 编辑器打不开,明天到公司看能不能打开。
自己的本地项目使用成功了,感谢
试了下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
```
`;
@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>
);
}
可以了,感谢!!!
@jaywcjlove it doesnt work for inline-katex, what to do?
@piush-terminalwitchcraft I updated the example, the v4 version dependency package api has changed
现在的Preview Markdown不支持使用KaTeX对数学公式进行渲染,有这个计划吗