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 default () => {
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>
);
};
一直在<Editor
处出错,经搜索,进行如下修改:
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";
// 没有下面的语句,编译失败
const MNEditor = Editor.default ?? Editor;
export default () => {
const [text, setText] = useState("# hello");
return (
<div style={{ display: "flex", height: "40vh" }}>
<div style={{ flex: "50%" }}>
<MNEditor
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>
);
};
标签:控件,react,rehype,astro,useState,Editor,text,import,第三方
From: https://www.cnblogs.com/soarowl/p/18345344