正文

安装

• hexojs/hexo-renderer-markdown-it: Markdown-it is a Markdown parser, done right. A faster and CommonMark compliant alternative for Hexo.

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

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 属性。例如：

   ## 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 的定义列表语法。定义列表通常用于展示术语及其定义。语法为：

   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 插件 获取想要的插件：

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 支持的语法插件：

# 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 即可。

示例

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¹.

A footnote can also have multiple lines².