ant design中预览markdown文档

Ant Design中预览Markdown文档可以使用Ant Design的文本编辑器组件和第三方的markdown解析库。

首先，在Ant Design中引入第三方markdown解析库，比如`marked`：

npm install marked --save

然后，在代码中引入`Editor`组件和`marked`库：

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { convertToRaw } from 'draft-js';
import draftToMarkdown from 'draftjs-to-markdown';
import marked from 'marked';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const MarkdownEditor = () => {
  const [editorState, setEditorState] = useState();

  const onEditorStateChange = (editorState) => {
    setEditorState(editorState);
  };

  const previewMarkdown = () => {
    const rawContentState = convertToRaw(editorState.getCurrentContent());
    const markdown = draftToMarkdown(rawContentState);
    const html = marked(markdown);
    return { __html: html };
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
      />
      <div dangerouslySetInnerHTML={previewMarkdown()}></div>
    </div>
  );
};

export default MarkdownEditor;

在`previewMarkdown`函数中，先将`Editor`组件的内容转换成`markdown`格式，再使用`marked`库将`markdown`转换成`html`格式，最后通过`dangerouslySetInnerHTML`属性将`html`渲染到页面中。