加载中...

加载中...

Markdown 语法扩展

本页汇总主题通过 hexo-renderer-markdown-it 启用的 14 个 markdown-it 插件(emoji / abbr / footnote / ins / sub / sup / mark / task-checkbox / multimd-table / imsize / container / deflist / mathjax3 / cjk-breaks,配置见根 _config.yml),外加综合示例与速查表。每个插件给出用途、语法、示例、效果,示例可直接复制到文章测试。

与「布局与页面」的行内加粗标签风格不同,本页因需容纳代码块与真实渲染示例,采用三级子标题(用途/语法/示例/效果)分隔。
注意:展示语法的代码块一律用 raw 标签包裹(rawendraw 成对),防止 nunjucks 预渲染时误处理或吞掉后续内容。
注意:本文含真实数学公式示例(第 13 项),因此 front-matter 已声明 mathjax: true——文章正文出现 $...$ / $$...$$ 公式时都必须声明它,否则公式原样显示。

1. emoji 表情(markdown-it-emoji)

用途

在 Markdown 中直接使用 emoji 短代码,无需复制 Unicode 字符。

语法

:smile: :heart: :rocket:

示例

😄 微笑 | ❤️ 爱心 | 🚀 火箭 | 👍 点赞

效果

短代码渲染为彩色 emoji 字符。

2. 缩写 abbr(markdown-it-abbr)

用途

定义缩写词,悬停时显示全称(生成 <abbr> 标签)。

语法

*[HTML]: Hyper Text Markup Language
HTML 是网页的标准语言。

定义行 *[缩写]: 全称 需写在文中第一次使用之前

示例

W3C 制定 Web 标准。

效果

缩写词带虚线下划线,鼠标悬停显示全称。

3. 脚注 footnote(markdown-it-footnote)

用途

在文末集中展示注释/出处,正文以上标数字引用。

语法

这里是正文[^1]。

[^1]: 这是脚注内容。

示例

Hexo 是一个快速静态博客框架[1]

效果

正文显示上标序号,点击跳转到文末脚注区(脚注编号全篇唯一,不可重复)。

4. 插入文本 ins(markdown-it-ins)

用途

++文本++ 渲染为带下划线的插入文本(类似修订标记)。

语法

这是 ++插入的内容++。

示例

本次更新 新增了暗色模式 支持。

效果

插入文本带下划线(<ins> 标签)。

5. 下标 sub(markdown-it-sub)

用途

~文本~ 渲染为下标。

语法

H~2~O 是水的化学式。

示例

CO2 是二氧化碳。

效果

文本渲染为下标(<sub> 标签)。

6. 上标 sup(markdown-it-sup)

用途

^文本^ 渲染为上标。

语法

E=mc^2^ 是质能方程。

示例

210 = 1024。

效果

文本渲染为上标(<sup> 标签)。

7. 高亮 mark(markdown-it-mark)

用途

==文本== 渲染为荧光笔高亮。

语法

这是 ==重点内容==。

示例

请特别注意 密码安全

效果

文本带高亮背景色(<mark> 标签),明暗模式自适应。

8. 任务列表 task-checkbox(markdown-it-task-checkbox)

用途

渲染带复选框的任务清单。

语法

- [x] 已完成任务
- [ ] 未完成任务

方括号内为 x 表示已完成,为空格表示未完成。

示例

效果

复选框 + 已完成任务带删除线样式。

9. 表格增强 multimd-table(markdown-it-multimd-table)

用途

标准 GFM 表格 + 对齐控制(左对齐 / 居中 / 右对齐)。

语法

| 左对齐 | 居中 | 右对齐 |
| :----- | :--: | -----: |
| a | b | c |

分隔行的冒号位置决定对齐::--- 左、:--: 中、---: 右。

示例

功能状态优先级
基础
高级
实验⚠️

效果

表格正确渲染且对齐生效(明暗模式自适应)。

10. 图片尺寸 imsize(markdown-it-imsize)

用途

在图片地址后追加 =宽x高 控制显示尺寸,无需 CSS。

语法

![图片描述](图片URL =300x200)

示例

封面

效果

图片按指定宽高显示(仅控制显示尺寸,不影响原图)。

11. 容器 container(markdown-it-container)

用途

::: 类型 渲染带色条 + 淡色背景的提示容器。主题已注册 7 种类型warning / note / info / attention / error / tip / hint

语法

::: warning
警示内容
:::

示例

这是一个 warning 容器——需要注意的内容!

这是一个 note 容器——补充说明。

这是一个 info 容器——信息提示。

这是一个 attention 容器——注意警示。

这是一个 error 容器——严重错误。

效果

带左侧色条 + 淡色背景的提示容器(映射到 note 样式),明暗模式自适应。上述 7 种类型均已注册,::: tip / ::: hint 渲染为 info 蓝色提示容器。

12. 定义列表 deflist(markdown-it-deflist)

用途

渲染定义列表(术语 + 多条描述)。

语法

术语
: 定义描述

示例

Hexo
快速、简洁且高效的博客框架。
基于 Node.js 编写。

效果

术语加粗,描述缩进(<dl> / <dt> / <dd> 结构)。

13. 数学公式 mathjax3(markdown-it-mathjax3)

用途

渲染 LaTeX 数学公式:$...$ 内联公式,$$...$$ 块级公式(需 front-matter 声明 mathjax: true)。

语法

内联:$E=mc^2$
块级:
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

示例

内联公式: E=mc2

块级公式:

0ex2dx=π2

效果

公式渲染为 SVG 数学符号(MathJax 渲染,支持 LaTeX 语法)。需要显示字面 $ 时用 \$ 转义。

14. 中文排版 cjk-breaks(markdown-it-cjk-breaks)

用途

优化中文排版:避免中英文混排时在错误位置断行。

语法

这是中文测试内容,混合English和中文。

效果

自动生效,无需任何标记——中英文混排的行内换行更符合中文阅读习惯。

15. 综合示例(多插件组合)

示例

任务清单(task-checkbox):

定义列表(deflist):

Markdown
轻量级标记语言。
由 John Gruber 发明。

脚注(footnote):教程 wiki 共 4 篇[2]

效果:多个插件组合在同一页面正常工作,互不干扰。

附:markdown-it 插件速查表

插件语法渲染说明
emoji:smile:emoji 字符短代码即用
abbr*[ABBR]: 全称<abbr> 悬停提示定义需在使用前
footnote[^1] + [^1]: 内容文末脚注编号全篇唯一
ins++文本++<ins> 下划线修订标记
sub~文本~<sub> 下标化学式等
sup^文本^<sup> 上标幂次等
mark==文本==<mark> 高亮荧光笔效果
task-checkbox- [x] / - [ ]复选框列表[x] 后有空格
multimd-tableGFM 表格<table>:--: 控制对齐
imsize![图](url =300x200)尺寸图仅显示尺寸
container::: warningnote 容器7 种类型注册
deflist术语 + : 定义<dl> 列表支持多行描述
mathjax3$公式$ / $$公式$$SVG 公式mathjax: true
cjk-breaks自动中文排版优化

常见坑

  • 展示语法的代码块必须用 raw 标签(raw/endraw 成对)包裹,防止 nunjucks 预渲染报错或吞掉后续内容
  • 文章正文含 $...$ / $$...$$ 公式时,front-matter 必须声明 mathjax: true,否则公式原样显示
  • 块级公式 $$...$$ 建议上下各留空行;需显示字面 $\$ 转义
  • 任务列表 - [x] 方括号后必须有空格;- [x]xxx 不会渲染为任务
  • abbr 定义行 *[缩写]: 全称 必须写在文中第一次使用之前,否则不生效
  • container 注册 warning/note/info/attention/error/tip/hint 7 种;::: tip/::: hint 渲染为 info 蓝色提示容器

  1. Hexo 官网:https://hexo.io ↩︎

  2. 布局、Tag 插件、交互、Markdown 语法。 ↩︎

评论
数据加载中 ...