Markdown 是一种轻量级、易于学习、易于阅读和易于撰写的文本格式，这样的优点让 Markdown 被广泛使用于写作、程序开发等领域。而 @uiw/react-markdown-preview 就是一个方便快捷的 npm 包，能够让开发人员在自己的 React 项目中方便地显示和预览 Markdown 文档。
安装
要使用 @uiw/react-markdown-preview 包，需要先在你的项目中安装它。你可以使用 yarn 或者 npm 来安装它，下面是相应的命令：
$ yarn add @uiw/react-markdown-preview
或
$ npm install @uiw/react-markdown-preview --save
使用
安装好后，使用之前需要将其引用到你的项目中，以下是代码示例：
-- -------------------- ---- -------
------ --------------- ---- ------------------------------
------ ------------------------------------------------
-------- ----- -
----- -------- - -- ------ --------
------ -
---- ----------------
---------------- ----------------- --
------
--
-参数
@uiw/react-markdown-preview 支持一些可选参数，可以帮助你更好地展示和管理 Markdown 文档。
source
source 参数是必需的，它接收一个字符串，包含要显示的 Markdown 文档内容。
<MarkdownPreview source={markdown} />className
className 参数可以为 Markdown 组件指定一个 CSS 类名称。
<MarkdownPreview className="my-class" source={markdown} />style
style 参数可以为 Markdown 组件添加样式。
<MarkdownPreview style={{ border: '1px solid #ccc' }} source={markdown} />escapeHtml
escapeHtml 参数默认为 true，可以将HTML实体转义。将其设置为 false 则可以直接在 Markdown 中使用 HTML 标签（谨慎使用）。
<MarkdownPreview escapeHtml={false} source={markdown} />sourcePos
sourcePos 参数默认为 false，是否在代码块上显示行号。
<MarkdownPreview sourcePos={true} source={markdown} />结束语
通过使用 @uiw/react-markdown-preview，我们可以轻松地在 React 项目中快速预览和展示 Markdown 文档，这无疑为项目开发和内容管理提供了非常便利的工具。当然，也需要注意使用 Markdown 语法的规范性和合理性，以便展示出更加美观的文档内容。希望这篇文章能够为你的开发工作带来帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbb9ab5cbfe1ea0611990