简介
advanced-marked 是一款基于 marked 的 npm 包，它提供了一系列扩展功能，使得我们可以更加方便快捷地将 Markdown 博客文档转换成 HTML，使用起来非常简单。
安装
你可以通过 npm 安装 advanced-marked 包，输入以下命令即可：
npm install advanced-marked
使用
- 引入 advanced-marked 包
在你的项目中引入 advanced-marked 包，代码示例：
const advancedMarked = require('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 文档。
表格语法的格式如下所示，其中 | 表示列之间的分隔符，- 用于分割表头和表身：
| 表头1 | 表头2 | 表头3 | | --- | --- | --- | | 数据1 | 数据2 | 数据3 | | 数据4 | 数据5 | 数据6 |
这样，我们就可以将 Markdown 文档中的表格语法转换为 HTML 的表格元素。
- Emoji
在设置 emoji 为 true 后，可以对 Markdown 中的 Emoji 进行转换处理。
Emoji 后面会带有一段代码。这个代码其实就是这个 Emoji 的编码，例如 :fire: 这个字符实际上对应的编码是 🔥。
- TOC
设置 toc 为 true 可以实现自动生成目录的功能，并在页面上展示出来。具体示例如下：
-- -------------------- ---- ------- ----- ------ - - ------ ----- ------- ----- ---- ----- ------- ----- ------ ----- --------- ----- --------- ----- ---- ----- --
- 任务列表
这个功能通过设置 taskLists 为 true 即可实现。它可以将类似于：
- [ ] 未完成 - [x] 已完成
这样的任务列表转变成 HTML 中的 checkbox 元素。
- MathJax
MathJax 是科学家撰写数学论文时同通用的工具。支持大多数 LaTeX 格式且使用此包，需先引用 MathJax：
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script>
如果将 mathJax 设置为 true，则可以将 markdown 中的 LaTeX 数学公式转换为 HTML 中的格式：
-- -------------------- ---- ------- ----- ------ - - ------ ----- ------- ----- ---- ----- ------- ----- ------ ----- --------- ----- --------- ----- ---- ----- ---------- ----- -------- ----- --
- Mermaid
Mermaid 是一个开源的 JavaScript 库，经过配置和使用，可以在 Markdown 中快速的绘制一个流程图，示例代码：
graph TD; A-->B; A-->C; B-->D; C-->D;
这时，我们需要设置 mermaid 为 true，才能实现在 markdown 文档中使用 mermaid 渲染流程图：
-- -------------------- ---- ------- ----- ------ - - ------ ----- ------- ----- ---- ----- ------- ----- ------ ----- --------- ----- --------- ----- ---- ----- ---------- ----- -------- ----- -------- ----- --
- Katex
与 MathJax 类似，KaTeX 是一个开源的 TeX/LaTeX 渲染引擎，可以用于快速渲染数学公式。
在使用 Katex 之前，需要引入相应的 css 和 js 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.css" integrity="sha256-Q0R0kWUiYSO/KZ6jTVX6fzUaxnkF2x07yFDVcCVM6ns=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.js" integrity="sha256-r1KAihV7mH6P9X/N7OgFicBAj5b5jeDpLufXRbYTvww=" crossorigin="anonymous"></script>
然后，我们通过设置 katex 的为 true 来实现 LaTeX 公式的渲染：
-- -------------------- ---- ------- ----- ------ - - ------ ----- ------- ----- ---- ----- ------- ----- ------ ----- --------- ----- --------- ----- ---- ----- ---------- ----- -------- ----- -------- ----- ------ ----- --
以上是 advanced-marked 的使用介绍。当长时间接触 Markdown 后，我们就会发现一些 Markdown 缺失的功能和细节，而这些缺失点，也是 advanced-marked 所要解决的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067368890c4f7277584049