安装依赖
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
