感觉自己写内容已经离不开 markdown 了,最近在做网站的内容页面有较多分类及文档,写 html 太麻烦了,索性用 markdown 来写了,react-markdown 是一个专门在 react 渲染 markdown 的包,简单记录一下使用方法。
react-markdown安装
npm install react-markdown
如果你需要在 markdown 中加入一些 html 内容,需要额外安装这个包
npm install rehype-raw
引入
import ReactMarkdown from 'react-markdown';
这里是一个官方的使用例子
import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'
import remarkGfm from 'remark-gfm'
const markdown = `A paragraph with *emphasis* and **strong importance**.
> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
* Lists
* [ ] todo
* [x] done
A table:
| a | b |
| - | - |
`
ReactDom.render(
<ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />,
document.body
)
不过这样写虽然能用,但是不够优雅,并且在自动格式化的时候会比较麻烦。那么可以用类似 readme.md
这样的方法来直接使用 md 文件呢?当然可以!
使用 md 文件,并将其渲染出来
先引入 md 文件
import faq from "./faq.md";
md 文件转义
componentWillMount() {
fetch(video)
.then(res => res.text())
.then(text => (video = text))
}
直接使用引入的 md 文件会无法渲染内容,只渲染出文件路径,因此需要这一步,我把它添加到了页面挂载事件里面,你可以把它添加到你觉得合适的位置。
使用
<div id='视频'>
<ReactMarkdown children={video} />
</div>