安裝依賴
yarn add react-markdown
yarn add remark-gfm
yarn add github-markdown-css
導(dǎo)入依賴
// 提供插入md文檔模板標(biāo)簽
import ReactMarkdown from 'react-markdown';
// 支持gfm語法 簡單理解就是平時書寫md文檔的語法
import remarkGfm from 'remark-gfm';
// md文檔所需要的樣式弯菊，例如表格的線條等等
import 'github-markdown-css';
使用
// 導(dǎo)入所需的md即可
import md from './MDDocument/ExpressDocument.md';
const SPELDocument = () => {
return <ReactMarkdown remarkPlugins={[[remarkGfm, { singleTilde: false }]]}>{md}</ReactMarkdown>;
};
// 放到class組件的render中或函數(shù)組件的return中渲染
<article className="markdown-body">
<SPELDocument />
</article>
所使用的依賴版本
"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",
"github-markdown-css": "^5.2.0",
效果預(yù)覽
image.png
