forked from XiaoMo/ChatGPT-Next-Web
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import "katex/dist/katex.min.css";
|
|
import RemarkMath from "remark-math";
|
|
import RehypeKatex from "rehype-katex";
|
|
import RemarkGfm from "remark-gfm";
|
|
import RehypePrsim from "rehype-prism-plus";
|
|
import { useRef } from "react";
|
|
import { copyToClipboard } from "../utils";
|
|
|
|
export function PreCode(props: { children: any }) {
|
|
const ref = useRef<HTMLPreElement>(null);
|
|
|
|
return (
|
|
<pre ref={ref}>
|
|
<span
|
|
className="copy-code-button"
|
|
onClick={() => {
|
|
if (ref.current) {
|
|
const code = ref.current.innerText;
|
|
copyToClipboard(code);
|
|
}
|
|
}}
|
|
></span>
|
|
{props.children}
|
|
</pre>
|
|
);
|
|
}
|
|
|
|
export function Markdown(props: { content: string }) {
|
|
return (
|
|
<ReactMarkdown
|
|
remarkPlugins={[RemarkMath, RemarkGfm]}
|
|
rehypePlugins={[RehypeKatex, [RehypePrsim, { ignoreMissing: true }]]}
|
|
components={{
|
|
pre: PreCode,
|
|
}}
|
|
className="line-break"
|
|
>
|
|
{props.content}
|
|
</ReactMarkdown>
|
|
);
|
|
}
|