致虚极 守静笃
Markdown支持
2020-06-10发布 271

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文件来设置文章样式了。需要参考样式的可以去看我的博客源码