Markdown支持

markdown

作为一种轻量级的标记语言，markdown可以帮助我们高效的编写文档，很多博客平台也都支持markdown编辑器，这里让我们修改程序，加上对markdown的支持。

首先来准备一段markdown文本，链接在这，复制markdown文本，在Django后台新建一篇文章，使用其做文章正文。

react-markdown

打开前端项目，呼出终端，使用如下命令安装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文件来设置文章样式了。需要参考样式的可以去看我的博客源码