在前端开发中，我们经常需要使用 Markdown 进行文档编辑和格式化。而 metamarkdown 是一个基于 Markdown 构建的强大工具，可以将 Markdown 文件转换为具有JSON格式的内部表示形式，并且可以轻松地进行AST转换和扩展处理。本文将通过详细的教程和示例代码，介绍如何使用 metamarkdown 这个 npm 包。
什么是 metamarkdown?
metamarkdown 是一个由Jonathan Wiechers创建的npm包，它可以通过使用明确的API，将Markdown文件解析成JSON格式的内部表示，这样开发者可以更容易地在Markdown文件上进行AST转换和扩展处理。它基于mardown-it或markdown-parse，并在其基础上添加了许多有用的插件来实现更便捷的使用体验。
安装和配置
使用 npm 安装 metamarkdown：
npm install metamarkdown --save
然后我们可以在 JavaScript 文件中引入 metamarkdown：
const metamarkdown = require('metamarkdown');配置选项
metamarkdown 具有一系列配置选项，允许我们在 Markdown 文件中实现更多的功能。我们可以在初始化 metamarkdown 时通过传递配置对象来设置这些选项。下面是一个典型的配置选项对象：
-- -------------------- ---- ------- ----- ------- - - ----- ----- -- -- ---- ---- -------- --- -- ---- ------------ ----- -- ----------- ------- ------ -- ----------------- -------- ----- -- ----------------------------- ----------- ------------ -- ----------------- ----------- --------------------- --- ----- -------------- ----- -------------------- ------- ------ -- ------------- -
当我们需要使用不同的配置选项对象时， 只需要在初始化 metamarkdown 时传递不同的对象即可。
使用 metamarkdown
当我们需要将 Markdown 文件转换成 JSON 格式时，我们可以调用 metamarkdown 实例的 parse 方法，并将需要转换的 Markdown 文件作为参数传入。以下是使用 metamarkdown.parse 方法的示例代码：
-- -------------------- ---- ------- ----- --------------- - - - ---- -- - ------- ----- - ---- -- - ---------- -- ---- -- - ------- ----- - ---- -- - ---- -- ------- - ----- - ------ - ------ -- ----- ------------ - ------------------------------------ --------------------------
输出结果为：
-- -------------------- ---- -------
--
------- ----------
-------- --
------- ----- -- - ------- ----- ---
----- ---------------------------
--
-
------- ------------
----------- --
------- -------
------- ----- -- - -----------
--
--
-
------- ----------
-------- --
------- ----- -- - ------- ----- ---
----- ---------------------------
--
-
------- -------
---------- ------
-------- -----
-------- ------
----------- --
------- -----------
----------- --
------- ------------
----------- --
------- -------
------- -------
--
--
--
-
------- -----------
----------- --
------- ------------
----------- --
------- -------
------- --------
--
--
--
-
------- -----------
----------- --
------- ------------
----------- --
------- -------
------- --------
--
--
-
-
-
-插件
metamarkdown 包括了许多有用的插件，可以在 Markdown 文件中添加更多的功能，这些插件被存储在 plugins 数组中。我们可以在 metamarkdown 的 options 对象中配置这些插件。以下是一些常见的插件：
emoji
此插件将 Markdown 文件中的表情符号转换为 Unicode 表情符号。以下是使用 emoji 插件的示例代码：
-- -------------------- ---- ------- ----- --------------- - - - ----- ------- ------- ------ ------- ---------- -------- -- ----- ------- - - ----- ----- -------- -------------------------------- ------------ ----- ------- ------ -------- ----- ----------- ------------ ------- ------ -- ----- ------------ - ----------------------------------- --------- --------------------------
输出结果为：
-- -------------------- ---- -------
--
------- ----------
-------- --
------- ------ ------- ----
----- ---------------
--
-
------- ------------
----------- --
------- --------
------- ----
-- -
------- -------
------- - -
-- -
------- --------
------- ----
-- -
------- -------
------- - -
-- -
------- --------
------- ---
-- -
------- -------
------- - -
-- -
------- --------
------- ----
--
-
-container
此插件允许我们将特定块的 Markdown 文件格式化为 HTML 元素。以下是使用 container 插件的示例代码：
-- -------------------- ---- ------- ----- --------------- - - --- ------- --- --- --- --- --- --- -- ----- ------- - - ----- ----- -------- ------------------------------------ ------------ ----- ------- ------ -------- ----- ----------- ------------ ------- ------ -- ----- ------------ - ----------------------------------- --------- --------------------------
输出结果为：
-- -------------------- ---- -------
--
------- -----------------
------- ---------
--
-
------- ------------
----------- --
------- -------
------- -----
--
--
-
------- ------------------
------- ---------
--
-
------- -----------------
------- -----
--
-
------- ------------
----------- --
------- -------
------- -----
--
--
-
------- ------------------
------- -----
-
-task lists
此插件允许我们在 Markdown 文件中创建任务列表。以下是使用 task lists 插件的示例代码：
-- -------------------- ---- ------- ----- --------------- - - - --- ---- -- - --------- ---- - --- ---- -- ------- --------- ---- - - - ---- -- -- ---------- ---- -- ----- ------- - - ----- ----- -------- ------------------------------------- ------------ ----- ------- ------ -------- ----- ----------- ------------ ------- ------ -- ----- ------------ - ----------------------------------- --------- --------------------------
输出结果为：
-- -------------------- ---- -------
--
------- -------
---------- ------
-------- -----
-------- ------
----------- --
------- -----------
------- -----
---------- -----
----------- --
------- -------
------- ----- -- - --------- -----
--
--
-
------- -----------
------- -----
---------- -----
----------- --
------- -------
------- ----- -- ------- --------- -----
--
--
-
------- -----------
------- -----
---------- ------
----------- --
------- -------
------- ----- -- -- ---------- -----
--
-
-
-
-字体颜色
此插件允许我们在 Markdown 文件中设置字体颜色。以下是使用字体颜色插件的示例代码：
-- -------------------- ---- ------- ----- --------------- - - ---- ---- -- ----------------------- ---- ---- -- ------------------------- -- ----- ------- - - ----- ----- -------- -------------------------------- ------------ ----- ------- ------ -------- ----- ----------- ------------ ------- ------ -- ----- ------------ - ----------------------------------- --------- --------------------------
输出结果为：
-- -------------------- ---- -------
--
------- ------------
----------- --
------- -------
------- ----- ---- -- -
--
-
------- -------
-------- ------- -----
------- -----
--
-
------- -------
------- -- ---- ---- -- -
--
-
------- -------
-------- ------- ------
------- ------
--
-
------- -------
------- ---
-
-
-
-自定义插件
除了使用内置插件之外，我们还可以创建自己的插件来扩展 metamarkdown。自定义插件是一个方法，它应该接受一个 markdown-it 实例以及其他选项参数。该方法应该在首次调用时返回一个函数，该函数将在 AST 转换时执行。以下是一个自定义插件示例代码：
-- -------------------- ---- -------
----- -------- - --------- -- -
------ ---------------- ------ -
----- ----- - --------------
------------------------
----- --------------
----- ----- -- - ------ -------
---
--
--
----- ------- - -
----- -----
-------- -----------
------------ -----
------- ------
-------- -----
----------- ------------
------- ------
--
----- --------------- - -
- ---- -- - -------
---- -- - ----------
--
----- ------------ - ----------------------------------- ---------
--------------------------输出结果为：
-- -------------------- ---- -------
-
-
------- ----------
-------- --
------- ----- -- - ---------
----- -------------------
--
-
------- --------------
------- ----- -- - ------ -------
--
-
------- ------------
----------- -
-
------- -------
------- ----- -- - -----------
-
-
-
-结论
metamarkdown 是一个非常有用的工具，可以帮助我们更便捷地处理 Markdown 文件，并在这些文件中添加更多的功能。本文详细地介绍了如何使用 metamarkdown，并提供了一些示例代码以供参考。通过结合插件和自定义插件，我们可以扩展 metamarkdown 的功能，从而更好的满足我们项目的需求。希望本文能够对开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727c81e8991b448e8aec