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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容