Markdown格式是开发者社区的一个长期主力。自2004年以来，我们一直在使用Markdown为各种平台创建内容，包括博客、网络论坛、聊天应用程序、所见即所得编辑器等等。
在本教程中，我们将向你展示如何使用 react-markdown 库从 React 组件中安全地渲染 Markdown。
什么是 react-markdown？
react-markdown是一个React组件，可以将Markdown文本转换为相应的HTML代码。它建立在remark 上，它是一个 Markdown 预处理器。
react-markdown使你能够安全地呈现markdown，因为它不依赖于dangerouslySetInnerHTML prop。相反，它使用一个语法树来构建虚拟DOM。
使用dangerouslySetInnerHTML 道具来解析 HTML 是危险的，因为如果你不确定来源，它可能会注入恶意的脚本。这可能使你的软件容易受到跨站脚本（XSS）攻击，在这种攻击中，不良分子将代码注入其他良性的应用程序和网站，向毫无戒心的用户发送恶意的脚本。
Markdown语言的设计是为了帮助你轻松创建编辑内容。这就是为什么它只包括基本标签。 react-markdown默认不支持HTML，因此可以防止脚本注入。这使得它可以安全地使用。
安装 react-markdown
你可以用npm安装react-markdown 库。
npm install react-markdown
或者，你也可以用yarn来安装这个库。
yarn add react-markdown
你不需要安装任何其他库来与 react-markdown 一起工作。然而，你可以选择使用一些插件来增强它的功能。我们将在后面讨论这些插件。
使用 react-markdown。一个简单的例子
由于 react-markdown 库提供了一个组件，我们需要把我们的 Markdown 文本作为子节点放在其中。然后这将返回转换后的HTML代码。
这里有一个例子。
import React from 'react'
import ReactMarkdown from 'react-markdown'
export default function MarkdownToHtml(){
return(
<ReactMarkdown>*React-Markdown* is **Awesome**</ReactMarkdown>
)
}
渲染后的输出结果将是 "React-Markdown真_厉害_"。
支持的Markdown语法
下面是react-markdown支持的Markdown语法的列表，无需使用任何外部插件。
见CodePen上Akash Mittal(@akash-mittal)的Pen
React-Markdown表。
在react-markdown中使用插件
如果你想超越上面描述的语法，react-markdown的父项目react-markdown已经创建了许多插件，你可以用来增强库的功能。
例如，react-markdown默认不支持自动链接、删除线、表格、任务列表等。如果你曾经在GitHub上创建过readme文件，你可能会用Markdown创建任务列表和表格。为了满足这一需求，备注创建了备注-gfm，它代表Github风味的Markdown。
为了使用插件，react-markdown提供了两个道具--remarkPlugins 和rehypePlugins ，这两个道具接受一个你想使用的所有插件的数组。你可以把诸如remark-gfm 和remark-maths 这样的评论插件放在remarkPlugin 道具中，而把诸如rehype-katex 这样的催眠插件放在rehypePlugins 道具中。
例如，如果你想支持删除线功能，你就需要使用 remark-gfm。让我们创建一个快速的演示，以显示这是如何工作的。
首先，安装remark-gfm 。
npm install remark-gfm
现在你可以在你的代码中使用它。
import React from 'react'
import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
export default function MarkdownToHtml(){
return(
<ReactMarkdown remarkPlugins={[gfm]}>*React-Markdown* now supports ~strikethrough~. Thanks to gfm plugin.</ReactMarkdown>
)
}
现在，由于 remark-gfm 插件，输出将是 "React-Markdown现在支持 删除线"。
如果你想支持数学表达式（如书面公式、方程式、分数等）或KaTeX，一个流行的数学排版库，你可以考虑使用remark-math和rehype-katex。这些插件使你能够将一般语言的符号转换成人类可读的数学格式。
这里有一个例子。
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
用KaTeX解析的上述例子会是这样的。
前往官方文档查看你可以在 react-markdown 中使用的注释插件的完整列表。
remark-gfm 插件的特殊语法
下表显示了你可以使用remark-gfm 插件启用的特殊功能，包括创建表格、删除线文本和待办事项列表的能力。
请看下面的实时演示。
在CodePen上看Pen Akash Mittal(@akash-mittal) 的
React-Markdown Table using Remark-gfm
。
React-Markdown Table using Remark-gfm by Akash Mittal(@akash-mittal)
onCodePen.
结论
在这个react-markdown教程中，我们学习了如何安全地将markdown语法渲染成适当的HTML。我们还回顾了如何使用各种插件，包括remark-gfm ，通过将它们传递给所提供的组件来使用 react-markdown。
The postHow to safely render markdown using react-markdownappeared first onLogRocket Blog.
