作为一种轻量级的标记语言,markdown可以帮助我们高效的编写文档,很多博客平台也都支持markdown编辑器,这里让我们修改程序,加上对markdown的支持。
首先来准备一段markdown文本,链接在这,复制markdown文本,在Django后台新建一篇文章,使用其做文章正文。
打开前端项目,呼出终端,使用如下命令安装react-markdown
这个库:
yarn add react-markdown
接着修改ArticleDetail.js
:
import ReactMarkdown from "react-markdown";
const ArticleDetail = () => {
...
<h4>{article.title}</h4>
<div className="article-body">
<ReactMarkdown source={article.body} escapeHtml={false} />
</div>
...
}
引入ReactMarkdown
这个组件,修改我们详情组件中文章正文部分,escapeHtml
这个参数设置为false
可以导致在markdown文本中的HTML
元素也可以被渲染,为了安全考虑可以去除这个参数,这个参数默认值是true
。
通过yarn start
运行应用,在浏览器中按下F12
检查元素:
我们的文章被成功解析,接下来可以新建ArticleDetail.css
文件来设置文章样式了。需要参考样式的可以去看我的博客源码