简介
在前端开发中，我们经常需要将 markdown 格式的文本渲染成 HTML。在 React 开发中，我们可以使用 @instamotor-labs/react-showdown 这个 npm 包。它是基于 Showdown.js 这个库封装的用于 React 的 Markdown 渲染组件。
安装
使用 npm 安装：
npm install @instamotor-labs/react-showdown` --save
如果你使用 yarn：
yarn add @instamotor-labs/react-showdown
使用
@instamotor-labs/react-showdown 的使用非常简单。只需要向组件传递 markdown 字符串即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- ----------------------------------
-------- ------------- -
----- -------- - -- ------ --------
------ -
-------------- ------------------- --
--
-组件属性
以下是 @instamotor-labs/react-showdown 的常用属性：
markdown：需要渲染的 markdown 字符串。flavor：渲染器的 flavor。支持以下值：github：GitHub 风格。original：原始风格。
options：传递给 Showdown.js 渲染器的选项（详细描述请参考 Showdown.js 文档）。components：自定义渲染组件的映射。键是标记名称，值是 React 组件。使用该属性可以自定义渲染如下标记：a、blockquote、code、del、em、h1、h2、h3、h4、h5、h6、hr、img、li、ol、p、pre、strong、table、tbody、td、th、thead、tr、ul。
escapeHtml：是否转义 HTML。默认为true。sanitizeHtml：是否启用 HTML 清理器。默认为false。
示例
以下是一个更加详细的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- ----------------------------------
-------- ------------- -
----- -------- - -- ------ ------
---- -- - ----------
-- ---- -- - ------- -
---- -- - -----
- ---- -
- ---- -
- ---- -
---- -- - ------
- ----- ------ - ------ ------ -
- ------------ - ------------- -
- ------- ---- - ------- ---- -
- ------- ---- - ------- ---- -
---- -- - ------ ----------
----- ---------- - -
--- -- -------- -- -- --- -------- ------ ----- -------------------
----- -- --------- ----- -- -- -------------------
--
----- ------- - -
------- -----
--
------ -
--------------
-------------------
-----------------------
-----------------
--
--
-这个示例渲染出以下内容：
总结
@instamotor-labs/react-showdown 提供了一个简单易用的方式在 React 中渲染 markdown。通过传递不同的属性，我们可以自定义渲染器的行为和样式。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005685881e8991b448e45cf