markdown 是一种轻量级的标记语言，它可以让我们用简洁的文本描述所需要呈现的内容，而不用再一点一点地敲 HTML 标签。在前端开发中，我们经常使用 markdown 来写博客、文档、README 文件等。而 react-marked-markdown 就是一个方便我们在 React 项目中使用 markdown 的 npm 包。
安装
使用 npm 安装 react-marked-markdown：
npm install react-marked-markdown
使用
在需要使用 markdown 的组件中，引入 react-marked-markdown 并使用 Markdown 组件即可。
import React from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-marked-markdown';
const markdown = '# Hello, world!';
ReactDOM.render(<Markdown markdown={markdown} />, document.getElementById('root'));上面的代码中，我们将 markdown 字符串作为 Markdown 组件的 markdown 属性传入，即可在页面上渲染出相应的 HTML 内容。当然，如果你需要将 markdown 文件直接渲染为 HTML，也可以使用 fs 模块读取文件内容，再将内容作为 markdown 属性传入 Markdown 组件。
配置
除了默认的渲染方式，我们还可以根据需求自定义 Markdown 组件的渲染方式。react-marked-markdown 支持自定义 renderer 和 options。
Renderer
我们可以自定义 renderer，实现对不同类型的 markdown 元素的渲染方式。比如，我们可以通过自定义 renderer 来实现对代码块的高亮：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ -------- ---- ------------------------ ------ --------- ---- --------------- ----- -------- - --- ------------------ ------------- - -------------- --------- - ----- --------------- - ------------------------------------ ------ ----------- ----------- ---------------------------------------------- - ----- -------- - - ---------------- ----- ---------- - ------- -------- ------------------------ ------ -- ------------------------- ------------------- ------------------- --- ---------------------------------
上面的代码中，我们首先引入了 highlight.js，然后创建了一个 renderer 对象，并重新定义了 code 方法。code 方法会将代码块中的代码提取出来，使用 highlight.js 进行高亮，最后生成带有高亮效果的 HTML 代码。
Options
我们还可以通过 options 对象来进一步定制化渲染方式。下面是一些常见的 options:
- gfm (boolean): 启用 GitHub 风格的 markdown。默认为
true。 - sanitize (boolean): 移除 HTML。默认为
false。 - smartLists (boolean): 开启智能列表。默认为
false。 - smartypants (boolean): 将引号和破折号转换为打印符号。默认为
false。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ -------- ---- ------------------------ ----- ------- - - ---- ----- --------- ----- ----------- ----- ------------ ----- -- ----- -------- - - - ------ ------ - ---- -- - ----------- -- ---- - -- ---- - -- ---- - --- -------- --- -------- --- -------- ---- --- ----- ---- ----------------------------- --------- -- ------------------------- ------------------- ----------------- --- ---------------------------------
上面的代码中，我们创建了一个 options 对象，并将其作为 options 属性传入 Markdown 组件。在这个例子中，我们启用了 gfm，使得 markdown 文件中的表格等 GitHub 扩展语法可以被正确解析；还启用了 sanitize，消除 markdown 文件中的 HTML 元素，避免 XSS 攻击。我们还在 markdown 文件中使用了其他一些基本的 markdown 语法，包括：
- 标题
- 引用
- 列表
- 分割线
- 粗体和斜体
- 代码块
- 链接
总结
在这篇文章中，我们介绍了如何使用 npm 包 react-marked-markdown 来在 React 项目中方便地使用 markdown。我们讲述了如何安装和使用 react-marked-markdown，以及如何通过自定义 renderer 和 options 定制化渲染方式。希望这篇文章能够帮助你更加方便地使用 markdown，提高代码编写效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc2cb5cbfe1ea06119df