react markdown editor示例

採用了@monaco-editor/react進行編輯，react-markdown預覽

import Editor from "@monaco-editor/react";
import { useState } from "react";
import Markdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw"; // 6.1.1 works! 7.0.0 don't
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";

export function Main() {
	const [text, setText] = useState("# hello");
	return (
		<div style={{ display: "flex", height: "40vh" }}>
			<div style={{ flex: "50%" }}>
				<Editor
          height={"100%"}
					defaultLanguage="markdown"
					defaultValue={text}
					onChange={(value, event) => setText(value || "")}
				/>
			</div>
			<div style={{ flex: "50%", height: "100%", overflow: "scroll" }}>
				<Markdown
					rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeSlug]}
					remarkPlugins={[remarkGfm, remarkToc]}
				>
					{text}
				</Markdown>
			</div>
		</div>
	);
}

用Farm除錯模式正常，正式版報錯！用vite ts/swc編譯，去掉rehype-raw都正常。