npm 包 to-mark 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在日常前端开发工作中，我们要经常处理一些富文本的输入输出。然而，在不同的场景下，我们需要将富文本转换为不同的格式。一种相对通用的格式是 Markdown。Markdown 语言文本简洁、易读、易写，还能转换为多种格式。那么，如何将我们处理的富文本转换为 Markdown 呢？答案就是使用 npm 包 to-mark。

介绍 to-mark

to-mark 是一个将 HTML 转换为 Markdown 的 npm 包。它使用了cheerio来解析 HTML，再将解析结果转化为 Markdown。

安装 to-mark

使用 npm 进行安装：

npm install to-mark

或者使用 yarn 进行安装：

yarn add to-mark

使用 to-mark

to-mark 接收两个参数，分别是要转换的 HTML 字符串和配置对象。配置对象是可选的，用来定制化不同场景的转换结果。

基本用法

以下是 to-mark 的基本使用方式：

const toMark = require('to-mark');
const htmlString = '<h1>hello, world!</h1>';
const markdownString = toMark(htmlString);

以上代码中，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 的特性包括任务清单、表格自动转换、删除线、分割线、自动链接等等。

const toMark = require('to-mark');
const htmlString = '<ul><li>[x] task 1</li><li>[ ] task 2</li></ul>';
const markdownString = toMark(htmlString, {gfm: true});

以上代码中，我们将一个包含任务清单的 HTML 列表转化为 Markdown 文本，并开启了 GFM。转换后的精简 Markdown 字符串为：

- [x] task 1
- [ ] task 2

tables

如果需要将 HTML 表格转换为 Markdown 表格，我们可以将 tables 配置为 true。

const toMark = require('to-mark');
const htmlString = '<table><thead><tr><th>Header 1</th><th>Header 2</th></tr></thead><tbody><tr><td>cell 1-1</td><td>cell 1-2</td></tr><tr><td>cell 2-1</td><td>cell 2-2</td></tr></tbody></table>';
const markdownString = toMark(htmlString, {tables: true});

以上代码中，我们将一个 HTML 表格转化为 Markdown 表格。转换后的 Markdown 字符串为：

| Header 1 | Header 2 |
|---|---|
| cell 1-1 | cell 1-2 |
| cell 2-1 | cell 2-2 |

fence

如果需要将代码块渲染为语法高亮形式，在 Markdown 中需要指定代码块的语言或类别。可以使用 fence 配置项来指定。

const toMark = require('to-mark');
const htmlString = '<pre><code class="language-javascript">const foo = 1;</code></pre>';
const markdownString = toMark(htmlString, {fence: 'javascript'});

以上代码中，我们将一个包含 JavaScript 代码块的 HTML 元素转换为 Markdown 文本，并将语言指定为 JavaScript。转换后的 Markdown 字符串为：

```javascript
const foo = 1;
```

bullet & itemIndent

如果需要修改无序列表项的标识符和缩进，我们可以使用 bullet 和 itemIndent 配置项。

const toMark = require('to-mark');
const htmlString = '<ul><li>one</li><li>two</li></ul>';
const markdownString = toMark(htmlString, {bullet: '+', itemIndent: '  '});

以上代码中，我们将一个无序 HTML 列表转化为 Markdown 文本，使用 + 作为标识符，每个列表项有两个空格的缩进。转换后的 Markdown 字符串为：

+ one
  + two

italic & bold

在 Markdown 中，可以使用 _ 或者 * 来包围斜体文本、__ 或者 ** 来包围粗体文本，to-mark 的 italic 和 bold 选项可用于指定这两个标识符。

const toMark = require('to-mark');
const htmlString = '<p><em>italic text</em> and <strong>bold text</strong></p>';
const markdownString = toMark(htmlString, {italic: '_', bold: '**'});

以上代码中，我们将一个包含斜体和粗体文本的 HTML 段落转换为 Markdown 文本，并使用 _ 来标记斜体文本，使用 ** 来标记粗体文本。转换后的 Markdown 字符串为：

_italic text_ and **bold text**

linkStyle

在 Markdown 中，链接有两种样式，inline 和 referenced。使用 linkStyle 配置项来指定需要的链接样式。

const toMark = require('to-mark');
const htmlString = '<p>Example: <a href="https://www.example.com/">https://www.example.com/</a></p>';
const markdownString1 = toMark(htmlString, {linkStyle: 'inlined'});
const markdownString2 = toMark(htmlString, {linkStyle: 'referenced'});

以上代码中，我们将一个包含链接的 HTML 段落分别转换为了 inline 样式和 referenced 样式的 Markdown 文本。转换后的 Markdown 字符串分别为：

Example: [https://www.example.com/](https://www.example.com/)

Example: [https://www.example.com/][1]

[1]: https://www.example.com/

完整示例

以下代码展示了 to-mark 的完整使用示例：

-- -------------------- ---- -------
----- ------ - -------------------
----- ---------- - -
  -----
    ---------- -----------
    ----- -- ----- --------- -------------
    ----
      ------------
      ------------
    -----
    -------
      -------
        ----
          ---------- ------
          ---------- ------
        -----
      --------
      -------
        ----
          -------- --------
          -------- --------
        -----
        ----
          -------- --------
          -------- --------
        -----
      --------
    --------
  ------
--
----- ------ - -
  ---- -----
  ------- -----
  ------ -------------
  ------- ----
  ----------- -  --
  ------- ----
  ----- -----
  ---------- ----------
-
----- -------------- - ------------------ --------
----------------------------

以上代码中，我们创建了一个包含了多种不同 HTML 元素的 HTML 字符串，然后使用 to-mark 将其转换为了 Markdown 字符串。

总结

在本文中，我们介绍了 npm 包 to-mark 的使用方法。to-mark 可以将 HTML 转换为 Markdown，并提供了多种可选的配置选项，以便更好地满足不同场景下的需求。通过 to-mark，我们可以更加便捷地处理富文本输入输出，减少在前端开发中的重复工作量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedb722b5cbfe1ea061173f