在 Web 开发中，Markdown 是一种常用的文本格式，用于快速编写易读易写的文档。在 Next.js 项目中，我们经常需要将 Markdown 转换为 HTML，在页面中进行渲染。这时候，一个非常实用的工具就是 Marked.js。
Marked.js 是一个快速、可靠的 Markdown 渲染器，支持在浏览器和 Node.js 中使用。在 Next.js 项目中，我们可以使用 Marked.js 将 Markdown 转换为 HTML，并在页面中渲染出来。
下面，我们就来详细介绍一下如何在 Next.js 中使用 Marked.js 进行 Markdown 渲染。
安装 Marked.js
首先，我们需要将 Marked.js 引入到项目中。有两种方式可以实现：
- 下载 Marked.js 文件到本地，然后在页面中引入。
<script src="/path/to/marked.min.js"></script>
- 使用 npm 安装 Marked.js。
npm install marked
在 Next.js 项目中，我们通常使用 npm 进行依赖管理，因此我们采用第二种方式进行 Marked.js 的引入。在项目根目录下执行如下命令即可：
npm install marked
使用 Marked.js 进行 Markdown 渲染
引入 Marked.js 后，我们就可以开始使用它进行 Markdown 渲染了。以下是代码示例：
-- -------------------- ---- -------
------ ------ ---- ---------
----- -------- - -- ------ ---------
---- -- -- ------- -- ----- --------- -- ------ ------------ -- - ------- --------
--
----- ---- - -----------------
------ ------- -------- ------------- -
------ -
---- -------------------------- ------- ---- -- --
--
-在上面的代码示例中，我们首先使用 import 引入了 Marked.js，并定义了一个 markdown 字符串。然后，调用 marked 函数将 markdown 转换为 html。最后，我们在组件中使用 dangerouslySetInnerHTML 将 html 渲染到页面中。
在使用 Marked.js 进行 Markdown 渲染时，还可以通过一些配置选项来控制渲染结果。以下是一些常用的选项：
breaks：是否在换行后添加<br>标签，默认为false。sanitize：是否过滤 HTML 标签，默认为false。smartLists：是否开启智能列表，默认为false。
例如，我们可以将以上示例代码改为如下代码，以开启换行和智能列表功能，并过滤掉 HTML 标签。
-- -------------------- ---- -------
------ ------ ---- ---------
----- -------- - -- ------ ---------
---- -- -- ------- -- ----- --------- -- ------ ------------ -- - ------- --------
- ---- ---- -
- ---- ---- -
- ---- ---- -
--
----- ---- - ---------------- -
------- -----
----------- -----
--------- -----
---
------ ------- -------- ------------- -
------ -
---- -------------------------- ------- ---- -- --
--
-总结
在本文中，我们介绍了如何在 Next.js 项目中使用 Marked.js 进行 Markdown 渲染。通过实际代码示例，我们学习了如何引入 Marked.js，以及如何使用它进行 Markdown 渲染，并掌握了一些实用的配置选项。希望这篇文章能够对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a4a3048841e9894872896