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

npm 包 advanced-marked 使用教程

简介

advanced-marked 是一款基于 marked 的 npm 包，它提供了一系列扩展功能，使得我们可以更加方便快捷地将 Markdown 博客文档转换成 HTML，使用起来非常简单。

安装

你可以通过 npm 安装 advanced-marked 包，输入以下命令即可：

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

使用

引入 advanced-marked 包

在你的项目中引入 advanced-marked 包，代码示例：

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

设置 advanced-marked 配置

下面是一个默认的配置示例：

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

你也可以根据自己的需要进行一些配置修改，比如：

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

这里我们添加了更多的配置项，默认支持了几个核心功能，如智能化处理、自动换行、Github Flavored Markdown、表格语法、Emoji 等等。现在，我们从接下来几个部分来分别介绍这些功能。

智能化处理

在配置中开启 smart 即可，它包括以下功能：

将 2 个及以上连续的空格转换成 HTML 实体，实现连续空格的效果；
将左箭头符号 << 转换成 « 实体；
将右箭头符号 >> 转换成 » 实体；
将单个星号 * 和下划线 _ 包裹的文本视为斜体，实现斜体的效果；
将 2 个星号 ** 和下划线 __ 包裹的文本视为加粗，实现加粗的效果；
将波浪符号 ~ 包裹的文本视为删除线，实现删除线的效果；

这样，我们在使用上述符号时，advanced-marked 底层会自动帮我们进行强制解析操作，避免了我们在写 Markdown 时触发了意想不到的格式问题。

自动换行

设置 breaks 为 true 即可开启自动换行。如果不开启，则文本内容会自动折叠在一起。类似于 Word 文档中的换行符，在 HMTL 中使用 br 标签。

Github Flavored Markdown

gfm 提供了 GitHub 上渲染 Markdown 的标准，包是实现 code 标记中的语法高亮显示，任务列表，表格等诸多功能。

AdvancedMarked 基于 gfm 作了一些拓展，使其更加完善和更符合实际使用场景的需求。

表格语法

在设置 tables 为 true 后，可以对 HTML 中的表格进行转换处理，实现 Markdown 文档转化为 HTML 文档。

表格语法的格式如下所示，其中 | 表示列之间的分隔符，- 用于分割表头和表身：

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

这样，我们就可以将 Markdown 文档中的表格语法转换为 HTML 的表格元素。

Emoji

在设置 emoji 为 true 后，可以对 Markdown 中的 Emoji 进行转换处理。

Emoji 后面会带有一段代码。这个代码其实就是这个 Emoji 的编码，例如 :fire: 这个字符实际上对应的编码是 🔥。

设置 toc 为 true 可以实现自动生成目录的功能，并在页面上展示出来。具体示例如下：

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

任务列表

这个功能通过设置 taskLists 为 true 即可实现。它可以将类似于：

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

这样的任务列表转变成 HTML 中的 checkbox 元素。

MathJax

MathJax 是科学家撰写数学论文时同通用的工具。支持大多数 LaTeX 格式且使用此包，需先引用 MathJax：

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

如果将 mathJax 设置为 true，则可以将 markdown 中的 LaTeX 数学公式转换为 HTML 中的格式：

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

Mermaid

Mermaid 是一个开源的 JavaScript 库，经过配置和使用，可以在 Markdown 中快速的绘制一个流程图，示例代码：

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

这时，我们需要设置 mermaid 为 true，才能实现在 markdown 文档中使用 mermaid 渲染流程图：

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

Katex

与 MathJax 类似，KaTeX 是一个开源的 TeX/LaTeX 渲染引擎，可以用于快速渲染数学公式。

在使用 Katex 之前，需要引入相应的 css 和 js 文件：

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

然后，我们通过设置 katex 的为 true 来实现 LaTeX 公式的渲染：

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

以上是 advanced-marked 的使用介绍。当长时间接触 Markdown 后，我们就会发现一些 Markdown 缺失的功能和细节，而这些缺失点，也是 advanced-marked 所要解决的。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/60067368890c4f7277584049