在前端开发中，我们经常需要将文本内容转化为 HTML。一种流行的做法是使用 Markdown，这样我们就只需编写易于阅读的 Markdown 文本，然后将其转化为 HTML 代码。这正是 metalsmith-mdast 要做的事情。
概述
Metalsmith 是一个静态站点生成器，它在构建过程中使用插件来转化文件。metalsmith-mdast 是一个 Metalsmith 插件，它原始仅支持将 Markdown 转化为 HTML。然而，其真正强大之处在于它支持将 mdast 抽象语法树转化为 HTML。这意味着你可以使用任何 mdast 插件来处理你的 Markdown，Create React App, Gatsby 等。
安装
使用 npm 安装 metalsmith-mdast：
npm install metalsmith metalsmith-mdast --save
使用
以下是一个非常基本的 metalsmith-mdast 配置，它只会将所有 Markdown 文件转化为 HTML，不进行其他任何处理：
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- -------- - ---------------------------- ----- ---- - --------------------------- ----- ------- - --------------------- ---------------- ----------------------- ---------------- ------------- ---------------------- ----- - -- ----- ----- ---- ---
以上代码中，我们将 Markdown 文件从 ./src 目录读入，将转化后的 HTML 文件输出到 ./build 目录。
流程
metalsmith-mdast 插件的主要目的是将文件从 Markdown 转化为 HTML。此转化过程分为以下两个步骤：
- 将 Markdown 文件解析为 mdast 抽象语法树
- 将 mdast 转换为 HTML
预处理插件
metalsmith-mdast 还支持在进行实际渲染操作前，对抽象语法树进行修改的预处理插件。在以下示例中，我们首先使用 remark-slug 插件为 Markdown 标题生成唯一的 slug。然后，我们使用类似于以下的模板来将抽象语法树转换为 HTML：
<h1 class="title" id="new-title">New Title</h1>
以下是进行了这些修改后的示例配置：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - ----------------------------
----- ---------- - -----------------------
----- ---- - ---------------------------
----- ------- - ---------------------
----------------
-----------------------
---------------
------- -
----------
--
--------- ------------ ----------- --------------------------------------------------
---
-------------
---------------------- ----- -
-- ----- ----- ----
---以上代码中，我们在 before 属性中指定了一个函数数组作为预处理插件。template 属性包含一个模板字符串，可以通过 {{...}} 占位符指定生成的 HTML。
结论
metalsmith-mdast 是将 Markdown 语法树转化为 HTML 的强大工具，可以使用各种 mdast 插件轻松扩展。我们可以通过预处理插件进一步自定义实际渲染的 HTML，从而获得更高的自定义性。
在你的下一个项目中，考虑使用 metalsmith-mdast 来转化 Markdown 文件，并在构建处理期间使用各种 mdast 插件来添加新的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040c62