react组件渲染markdown文档

安装依赖

yarn add react-markdown
yarn add remark-gfm
yarn add github-markdown-css

导入依赖

// 提供插入md文档模板标签
import ReactMarkdown from 'react-markdown';
// 支持gfm语法 简单理解就是平时书写md文档的语法
import remarkGfm from 'remark-gfm';
// md文档所需要的样式，例如表格的线条等等
import 'github-markdown-css';

使用

// 导入所需的md即可
import md from './MDDocument/ExpressDocument.md';

const SPELDocument = () => {
  return <ReactMarkdown remarkPlugins={[[remarkGfm, { singleTilde: false }]]}>{md}</ReactMarkdown>;
};

// 放到class组件的render中或函数组件的return中渲染
 <article className="markdown-body">
      <SPELDocument />
 </article>

所使用的依赖版本

    "react-markdown": "^8.0.7",
    "remark-gfm": "^3.0.1",
    "github-markdown-css": "^5.2.0",

效果预览

image.png