Markdown 拓展增强特性

GitHub 仓库卡片#

您可以添加动态链接到 GitHub 仓库的卡片。页面加载时,仓库信息会自动通过 GitHub API 获取。

::github{repo="LyraVoid/Mizuki"}

使用语法 ::github{repo="LyraVoid/Mizuki"} 即可插入一个 GitHub 仓库卡片:

::github{repo="LyraVoid/Mizuki"}

告示与警告提示框 (Admonitions)#

支持以下类型的提示框:note(笔记)、tip(提示)、important(重要)、warning(警告)、caution(注意)。

NOTE

突出显示用户即使在浏览时也应考虑的信息。

TIP

帮助用户更顺利完成操作的辅助信息。

IMPORTANT

用户成功操作所必需的关键信息。

WARNING

因存在潜在风险而需要用户立即注意的告警内容。

CAUTION

某种操作可能带来的负面后果提示。

基础语法#

:::note
突出显示用户即使在浏览时也应考虑的信息。
:::

:::tip
帮助用户更顺利完成操作的辅助信息。
:::

自定义标题#

提示框的标题可以自由自定义:

NOTE

我的自定义标题

这是一个带有自定义标题的笔记提示框。

:::note[我的自定义标题]
这是一个带有自定义标题的笔记提示框。
:::

GitHub 告警语法#

[!TIP] 原生支持 GitHub 告示语法

> [!NOTE]
> 原生支持 GitHub 告警语法。

> [!TIP]
> 原生支持 GitHub 告警语法。

剧透遮罩 (Spoiler)#

您可以为文本添加遮罩效果,悬停或点击后显示。文本内部同样支持 Markdown 语法。

文字内容 这里是被隐藏的暗号

文字内容 :spoiler[这里是被隐藏的**暗号**]!

代码组 (Code Groups)#

使用 VitePress 风格的 ::: code-group labels=[...] 语法将相关示例展示为选项卡。选项卡支持鼠标点击及 LeftRight 键盘切换。

::: code-group labels=[TypeScript, Shell, 折叠示例]

export const config = {
  framework: "Mizuki",
  enhanced: true,
};
pnpm check && pnpm build
import { one } from "one";
import { two } from "two";
import { three } from "three";
console.log(one, two, three);

:::

::: code-group labels=[TypeScript, Shell]

```ts title="config.ts"
export const framework = "Mizuki";
```

```bash title="构建"
pnpm build
```

:::

长代码块自动折叠#

超过配置行数阈值的代码块会自动折叠,作者亦可继续使用 collapse={...} 手动折叠指定行范围。

拓展 Callout 别名#

除了 GitHub 的五种提示类型外,Mizuki 还兼容 Obsidian 常用别名如 INFOTODOSUCCESSQUESTIONDANGERBUGEXAMPLEQUOTE

[!BUG] 已知限制说明 扩展别名会自动映射为 Mizuki 语义化的提示框样式。

同时也支持 Python Markdown 与 Docusaurus 指令语法:

DANGER

危险操作提示

该指令使用了自定义危险标题。

> [!BUG] 已知限制说明
> 在此描述已知问题。

:::danger[危险操作提示]
该指令使用了自定义危险标题。
:::

Wiki 链接#

Obsidian 风格的 Wiki 链接可自动解析文章路径、别名及标题锚点。独立的单行链接会自动渲染为关联文章卡片:

Markdown Mermaid 图表示例

内联链接保持行内渲染。参阅 Mermaid 图表示例,或者直接链接至 指定章节

[[markdown-mermaid]]

参阅 [[markdown-mermaid|Mermaid 图表示例]]。

自动图片画廊#

两张或更多相邻的独立图片会自动组合为响应式图片网格。如需自定义列数或宽高比,可显式使用 :::grid 指令。

方形示例 1
方形示例 1
方形示例 2
方形示例 2
![第一张图](/images/first.webp)
![第二张图](/images/second.webp)

PlantUML 图表#

PlantUML 代码块会自动调用配置的服务端生成矢量 SVG 图表,支持放大、缩放、拖拽和全屏预览。

PlantUML diagram
```plantuml
@startuml
Alice -> Bob: 你好
@enduml
```

化学方程式#

内置 KaTeX mhchem 扩展,轻松渲染化学反应方程式:

\ceH2O+CO2>H2CO3\ce{H2O + CO2 -> H2CO3}
Markdown 拓展增强特性
作者:LcooYa
CC BY-NC-SA 4.0
相关文章