react-ace使用示例

import { useState } from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-markdown";
import "ace-builds/src-noconflict/ext-language_tools";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";

export default () => {
	const [value, setValue] = useState("# Hello");

	function onChange(newValue: string) {
		setValue(newValue);
	}

	return (
		<div style={{ display: "flex", height: "40vh", width: "100%" }}>
			<div id="editor" style={{ height: "0px", width: "0px" }} />
			<AceEditor
				height="40vh"
				name="editor"
				mode="markdown"
				onChange={onChange}
				setOptions={{
					enableBasicAutocompletion: true,
					enableLiveAutocompletion: true,
					wrap: true,
				}}
				style={{ flex: "50%", height: "100%", width: "100%" }}
				value={value}
			/>
			<div
				style={{ flex: "50%", height: "100%", width: "100%", overflow: "auto" }}
			>
				<Markdown
					rehypePlugins={[rehypeRaw]}
					remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
				>
					{value}
				</Markdown>
			</div>
		</div>
	);
}