VitePress 对标准语法的扩展

文档用途

记录 VitePress 对于 markdown 语法的常用扩展.
更多详见官方文档 Markdown Extensions.

文本容器

常规用法

INFO

这是一行文本.

TIP

这是一条建议.

WARNING

这是一条警告.

DANGER

这是一条严重警告.

Details

可折叠的细节.

通过首行的 ::: xxx 和尾行的 ::: 来包裹文本内容.

::: info
这是一行文本.
:::

::: tip
这是一条建议.
:::

::: warning
这是一条警告.
:::

::: danger
这是一条严重警告.
:::

::: details
可折叠的细节.
:::

自定义标题

小建议

这是一条建议.

点击查看细节

可折叠的细节.

在 ::: xxx 后面写自定义的标题即可.

::: tip 小建议
这是一条建议.
:::

::: details 点击查看细节
可折叠的细节.
:::

代码块

部分高亮

pub async fn shutdown() {
    tokio::signal::ctrl_c().await.unwrap();
    info!("shutdown");
}

在代码块的类型后面的 {} 内添加行号.

```rs{2}
pub async fn shutdown() {
    tokio::signal::ctrl_c().await.unwrap();
    info!("shutdown");
}
```

或者在需要高亮的行尾添加 // [!code hl].

```rs
pub async fn shutdown() {
    tokio::signal::ctrl_c().await.unwrap(); // [!code  hl]
    info!("shutdown");
}
```

显示行号

let line1: &str = "This is line 1";
let line2: &str = "This is line 2";

在代码块的类型后面添加 :line-numbers.

```rs:line-numbers
let line1: &str = "This is line 1";
let line2: &str = "This is line 2";
```

标记改动

pub async fn shutdown() {
    tokio::signal::ctrl_c().await.unwrap();
    info!("shutdown"); 
    info!("gracefull shutdown"); 
}

在需要标记 删除 的行尾添加 // [!code --].
在需要标记 新增 的行尾添加 // [!code ++].

```rs
pub async fn shutdown() {
    tokio::signal::ctrl_c().await.unwrap();
    info!("shutdown"); // [!code  --]
    info!("gracefull shutdown"); // [!code  ++]
}
```

分组显示

lib.rs

pub async fn handler_404() -> Response {
    (StatusCode::NOT_FOUND, "404 not found").into_response()
}

lib.rs

pub async fn handler_root() -> Html<&'static str> {
    Html(include_str!("../index.html"))
}

通过首行的 ::: code-group 和尾行的 ::: 来包裹文本.

::: code-group

```rs [lib.rs]
pub async fn handler_404() -> Response {
    (StatusCode::NOT_FOUND, "404 not found").into_response()
}
```

```rs [lib.rs]
pub async fn handler_root() -> Html<&'static str> {
    Html(include_str!("../index.html"))
}
```

:::

Emoji

扩展语法

🎉 💯 ✌️ 可以直接复制 Emoji 使用, 也可以用 :名称: 来显示.

:tada: :100: :v:

常用列表

更多详见 所有可用 Emoji.

名称	图标		名称	图标
1st_place_medal	🥇		tada	🎉
dart	🎯		pushpin	📌
package	📦		gift	🎁
100	💯		sweat_drops	💦
zzz	💤		ok_hand	👌
v	✌️		thumbsup	👍
point_right	👉		point_up_2	👆
handshake	🤝		eyes	👀
bug	🐛		star	⭐
zap	⚡		fire	🔥
jigsaw	🧩		game_die	🎲
bell	🔔		no_bell	🔕
musical_note	🎵		notes	🎶
mag	🔍		bulb	💡
book	📖		label	🏷️
envelope	✉️		pencil2	✏️
file_folder	📁		open_file_folder	📂
straight_ruler	📏		scissors	✂️
lock	🔒		unlock	🔓
key	🔑		shield	🛡️
gear	⚙️		hammer_and_wrench	🛠️
wrench	🔧		link	🔗
broom	🧹		warning	⚠️
no_entry	⛔		underage	🔞
high_brightness	🔆		infinity	♾️
recycle	♻️		copyright	©️
accept	🉑		construction	🚧
anchor	⚓		hook	🪝
heavy_check_mark	✔️		x	❌

Badge 标签

default^1.9.0betacaution

Badge 类似文本容器, 也使用 info, tip, warning, danger 关键词.
因为 VitePress 支持在 markdown 中插入 vue 组件, 而 <Badge /> 是 VitePress 自带的组件.

<Badge type="info" text="default" />
<Badge type="tip" text="^1.9.0" />
<Badge type="warning" text="beta" />
<Badge type="danger" text="caution" />