正文

安装

​ 这个插件可以让 Hexo 使用 Markdown-it 渲染器来渲染文章，这提供了从 Markdown 语法到 html 语法转换更丰富的规则，真是太厉害了！卸载掉之前的渲染器，安装它！

1
npm install hexo-renderer-markdown-it

自带插件介绍

​ 安装这个插件后，默认包括了如下 Markdown-it 插件：

  1. markdown-it-abbr
    该插件用于支持 Markdown 中的缩写（abbreviation）功能。在 Markdown 中，你可以使用类似 *[HTML]: Hyper Text Markup Language 的语法来定义缩写和其扩展意义，最终在渲染时会显示为带有悬停提示的缩写。例如，HTML 会变成带有提示“Hyper Text Markup Language”的可点击链接。

  2. markdown-it-attrs
    这个插件允许你在 Markdown 元素（如标题、段落、代码块等）上添加自定义的 HTML 属性。通过这种方式，你可以为 Markdown 语法元素添加类、ID 和其他 HTML 属性。例如：

    1
    ## Example {#custom-id .custom-class}

    会为该标题添加自定义的 ID 和类名。

  3. markdown-it-cjk-breaks
    该插件用于改善 CJK（中文、日文、韩文）文本的自动换行支持。由于 CJK 文本没有空格作为分隔符，这在网页中导致排版问题。markdown-it-cjk-breaks 插件会确保 CJK 字符在合理的位置换行，以提高文本的可读性。

  4. markdown-it-container
    这个插件允许你创建自定义容器块。容器块通常用于为特定部分的内容添加自定义样式。语法形式为 :::container-name 和 :::，可以用于定义自定义的区块元素，例如自定义的提示框或内容框。

  5. markdown-it-deflist
    该插件支持 Markdown 的定义列表语法。定义列表通常用于展示术语及其定义。语法为：

    1
    2
    3
    4
    5
    term1
    : definition1

    term2
    : definition2

  6. markdown-it-emoji
    该插件允许在 Markdown 中使用 emoji 表情。你可以通过类似 :smile: 的语法嵌入 emoji，插件会将这些文本替换为相应的图像。例如，:smile: 会渲染为一个微笑的表情图标。

  7. markdown-it-footnote
    这个插件支持 Markdown 中的脚注功能。你可以使用类似 [^1]: This is a footnote 的语法来定义脚注，并在文档中引用它们。插件会自动生成带有链接的脚注，允许用户在文档的底部查看详细内容。

  8. markdown-it-ins
    该插件支持在 Markdown 中添加 <ins> HTML 标签，用于表示插入的文本。你可以通过类似 ++Inserted text++ 的语法将文本标记为插入部分，最终渲染为带下划线的文本。

  9. markdown-it-mark
    这个插件允许你在 Markdown 中使用 <mark> 标签来标记文本。通过类似 ==highlighted text== 的语法，可以将文本高亮显示，通常渲染为背景颜色不同的文本。

  10. markdown-it-sub
    该插件支持 Markdown 中的下标功能。你可以通过语法 ~subscript~ 来创建下标文本，最终会将其渲染为小一号的文本，常用于化学式或数学公式。

  11. markdown-it-sup
    该插件支持 Markdown 中的上标功能。你可以通过语法 ^superscript^ 来创建上标文本，通常用于数学符号、指数或其他需要上标的内容。

​ 这些插件扩展了 markdown-it 的功能，使其在处理 Markdown 文本时更加灵活，能够更好地支持各种格式和渲染需求。如果你在使用 markdown-it 时有特别的需求，可以考虑根据实际情况选择合适的插件。

获取其它插件

​ 当然，我们也可以从 MarkdownIt 插件 | Markdown It 插件 获取想要的插件：

1
2
3
4
npm install markdown-it-task-lists
npm install markdown-it-github-alerts
npm install markdown-it-anchor
npm install markdown-it-footnote

使用插件

​ 如果需要启用它们（其中若干），则在项目根目录下的 _config.yml 启动它！

​ 这里我们根据 基本撰写和格式语法 - GitHub 文档 和 Typora Support 引入一些符合 Github 编写规范和 Typora 支持的语法插件：

1
2
3
4
5
6
7
8
9
10
# Markdown-it config
markdown:
    plugins:
        - markdown-it-sub  # 下标
        - markdown-it-sup  # 上标
        - markdown-it-mark  # 高亮
        - markdown-it-task-lists  # 任务列表
        - markdown-it-github-alerts  # github 警告框
        - markdown-it-anchor  # 目录锚点
        - markdown-it-footnote  # 角标

​ 在引入相应的渲染插件后，设计并引入好对应 Html 结构的 CSS 和 JS 即可。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
NH~4~^+^

- [ ] 这个任务还没做
- [x] 这个任务做完了

==我是高亮文本==

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
  This is a second line

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

NH4+

  • 这个任务还没做
  • 这个任务做完了

我是高亮文本

Here is a simple footnote[1].

A footnote can also have multiple lines[2].

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

  1. My reference. ↩︎

  2. To add line breaks within a footnote, prefix new lines with 2 spaces.
    This is a second line ↩︎

Icon
Icon
Icon
Icon
上一篇：Unity-WebGL
下一篇：Web-ScrollReveal