前言
在日常前端开发工作中，我们要经常处理一些富文本的输入输出。然而，在不同的场景下，我们需要将富文本转换为不同的格式。一种相对通用的格式是 Markdown。Markdown 语言文本简洁、易读、易写，还能转换为多种格式。那么，如何将我们处理的富文本转换为 Markdown 呢？答案就是使用 npm 包 to-mark。
介绍 to-mark
to-mark 是一个将 HTML 转换为 Markdown 的 npm 包。它使用了cheerio来解析 HTML，再将解析结果转化为 Markdown。
安装 to-mark
使用 npm 进行安装：
--- ------- -------
或者使用 yarn 进行安装：
---- --- -------
使用 to-mark
to-mark 接收两个参数，分别是要转换的 HTML 字符串和配置对象。配置对象是可选的，用来定制化不同场景的转换结果。
基本用法
以下是 to-mark 的基本使用方式：
----- ------ - ------------------- ----- ---------- - ----------- ------------- ----- -------------- - -------------------
以上代码中，toMark 函数接收一个 HTML 字符串，将其转换为 Markdown 字符串。在这个例子中，转换后的 Markdown 字符串为 # hello, world!。
配置选项
to-mark 提供了一些可选的配置选项，以便我们在不同场景下获得更符合需求的转换结果。
- gfm (Boolean)：是否开启 GitHub Flavored Markdown (GFM)。默认为
true。 - tables (Boolean)：是否将 HTML 表格转换为 Markdown 表格。默认为
true。 - fence (String)：指定代码块的语言（类别）。默认为
''。 - bullet (String)：指定无序列表项的标识符。默认为
'-'。 - itemIndent (String)：指定列表项的缩进。默认为
''。 - italic (String)：用于斜体文本的标识符。默认为
'*'。 - bold (String)：用于粗体文本的标识符。默认为
'*'。 - linkStyle (String)：指定链接的样式。可选值为
'inlined'或'referenced'。默认为'inlined'。
以下是对配置选项的进一步说明：
gfm
如果需要将 HTML 转换为 GFM，即 GitHub Flavored Markdown，我们可以将 gfm 配置为 true。GFM 的特性包括任务清单、表格自动转换、删除线、分割线、自动链接等等。
----- ------ - ------------------- ----- ---------- - ------------ ---- ----------- - ---- ------------- ----- -------------- - ------------------ ----- -------
以上代码中，我们将一个包含任务清单的 HTML 列表转化为 Markdown 文本，并开启了 GFM。转换后的精简 Markdown 字符串为：
- --- ---- - - - - ---- -
tables
如果需要将 HTML 表格转换为 Markdown 表格，我们可以将 tables 配置为 true。
----- ------ - ------------------- ----- ---------- - ----------------------------- ---------------- -------------------------------------- ---------------- ------------------------- ---------------- ------------------------------- ----- -------------- - ------------------ -------- -------
以上代码中，我们将一个 HTML 表格转化为 Markdown 表格。转换后的 Markdown 字符串为：
- ------ - - ------ - - --------- - ---- --- - ---- --- - - ---- --- - ---- --- -
fence
如果需要将代码块渲染为语法高亮形式，在 Markdown 中需要指定代码块的语言或类别。可以使用 fence 配置项来指定。
----- ------ - ------------------- ----- ---------- - ----------- --------------------------------- --- - ----------------- ----- -------------- - ------------------ ------- ---------------
以上代码中，我们将一个包含 JavaScript 代码块的 HTML 元素转换为 Markdown 文本，并将语言指定为 JavaScript。转换后的 Markdown 字符串为：
------------- ----- --- - -- ---
bullet & itemIndent
如果需要修改无序列表项的标识符和缩进，我们可以使用 bullet 和 itemIndent 配置项。
----- ------ - ------------------- ----- ---------- - ------------------------------------ ----- -------------- - ------------------ -------- ---- ----------- - ----
以上代码中，我们将一个无序 HTML 列表转化为 Markdown 文本，使用 + 作为标识符，每个列表项有两个空格的缩进。转换后的 Markdown 字符串为：
- --- - ---
italic & bold
在 Markdown 中，可以使用 _ 或者 * 来包围斜体文本、__ 或者 ** 来包围粗体文本，to-mark 的 italic 和 bold 选项可用于指定这两个标识符。
----- ------ - ------------------- ----- ---------- - -------------- --------- --- ------------ ------------------- ----- -------------- - ------------------ -------- ---- ----- -------
以上代码中，我们将一个包含斜体和粗体文本的 HTML 段落转换为 Markdown 文本，并使用 _ 来标记斜体文本，使用 ** 来标记粗体文本。转换后的 Markdown 字符串为：
------- ----- --- ------ ------
linkStyle
在 Markdown 中，链接有两种样式，inline 和 referenced。使用 linkStyle 配置项来指定需要的链接样式。
----- ------ - ------------------- ----- ---------- - ------------ -- ------------------------------------------------------------------ ----- --------------- - ------------------ ----------- ------------ ----- --------------- - ------------------ ----------- ---------------
以上代码中，我们将一个包含链接的 HTML 段落分别转换为了 inline 样式和 referenced 样式的 Markdown 文本。转换后的 Markdown 字符串分别为：
-------- ----------------------------------------------------
-------- ----------------------------- ---- ------------------------
完整示例
以下代码展示了 to-mark 的完整使用示例：
----- ------ - -------------------
----- ---------- - -
-----
---------- -----------
----- -- ----- --------- -------------
----
------------
------------
-----
-------
-------
----
---------- ------
---------- ------
-----
--------
-------
----
-------- --------
-------- --------
-----
----
-------- --------
-------- --------
-----
--------
--------
------
--
----- ------ - -
---- -----
------- -----
------ -------------
------- ----
----------- - --
------- ----
----- -----
---------- ----------
-
----- -------------- - ------------------ --------
----------------------------以上代码中，我们创建了一个包含了多种不同 HTML 元素的 HTML 字符串，然后使用 to-mark 将其转换为了 Markdown 字符串。
总结
在本文中，我们介绍了 npm 包 to-mark 的使用方法。to-mark 可以将 HTML 转换为 Markdown，并提供了多种可选的配置选项，以便更好地满足不同场景下的需求。通过 to-mark，我们可以更加便捷地处理富文本输入输出，减少在前端开发中的重复工作量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb722b5cbfe1ea061173f