内容展示指令（8个指令）

用于在文章中插入提示信息、代码和私密内容。

信息提示

提示框（callout）

最常用的信息提示块，支持多种类型和自定义标题。

演示效果示例代码

Info

这是一条信息提示，适合补充说明背景知识或额外信息。

小技巧

通过 title 属性可以自定义提示框的标题，让提示更加明确。

注意事项

这是一条警告提示，提醒读者需要小心处理的地方。

危险操作

执行此操作前请务必备份数据，该操作不可逆！

:::callout{type="info"}
这是一条**信息提示**，适合补充说明背景知识或额外信息。
:::

:::callout{type="tip" title="小技巧"}
通过 `title` 属性可以自定义提示框的标题，让提示更加明确。
:::

:::callout{type="warn" title="注意事项"}
这是一条**警告提示**，提醒读者需要小心处理的地方。
:::

:::callout{type="danger" title="危险操作"}
执行此操作前请务必备份数据，该操作不可逆！
:::

type 可选值：info（蓝色，普通信息）、tip（绿色，提示建议）、warn（黄色，警告注意）、danger（红色，危险警示）
title 可自定义标题，不传则使用默认类型名称

高亮块（note）

带主题色的高亮区域，适合强调重要内容。

演示效果示例代码

使用博客主题色的轻量提示块。支持 color 属性自定义颜色。

关于主题

Vergil 主题基于 Astro 构建，支持多种内容指令和自定义配置。

成功提示

文章发布成功！读者现在可以在首页看到你的新文章了。

:::note
使用博客**主题色**的轻量提示块。支持 `color` 属性自定义颜色。
:::

:::note{color="blue" title="关于主题"}
Vergil 主题基于 Astro 构建，支持多种内容指令和自定义配置。
:::

:::note{color="green" title="成功提示"}
文章发布成功！读者现在可以在首页看到你的新文章了。
:::

color 可选值：blue（科技蓝）、green（自然绿）、red（警示红）、yellow（活力黄）、purple（优雅紫）或任意十六进制色值
title 可设置标题，让提示块更具辨识度

引用卡片（quot）

带图标的引用展示，适合引用名言或重要观点。

演示效果示例代码

代码是写给人看的，顺便让机器执行。

好的设计是显而易见的，伟大的设计是透明的。

:::quot{icon="quote"}
代码是写给人看的，顺便让机器执行。
:::

:::quot{icon="lightbulb"}
好的设计是显而易见的，伟大的设计是透明的。
:::

icon 可自定义图标：Iconify 图标名或图片地址（外链、@img/、相对路径），不传则使用默认引号图标
支持 Iconify 图标名称（如 lucide:lightbulb、bxs:quote-left）
只写图标名（如 quote、lightbulb）时自动尝试 lucide: 前缀

标题装饰 / 强调引用（title）

为标题添加装饰性样式，支持引号环绕、徽章标记等多种效果。适合用作文章章节标题或强调引用语句。

演示效果示例代码

读万卷书，行万里路

徽章样式的章节标题

带阴影的蓝色引用标题

绿色徽章阴影标题

:::title{style="quote"}
读万卷书，行万里路
:::

:::title{style="badge"}
徽章样式的章节标题
:::

:::title{style="quote" color="blue" shadow="true"}
带阴影的蓝色引用标题
:::

:::title{style="badge" color="green" shadow="true"}
绿色徽章阴影标题
:::

属性说明

属性	默认值	说明
`style`	`quote`	样式，可选 `quote`（引号装饰）或 `badge`（徽章标记）
`el`	`h2`	标题级别，可选 `h2`~`h6`
`centered`	`false`	是否居中显示，`true` 开启
`color`	`rgb(255, 87, 36)`	装饰颜色，支持预设名称或任意色值
`shadow`	`false`	阴影效果，`true` 开启
`prefix`	见说明	前缀图标（见下方详解）
`suffix`	见说明	后缀图标（仅 `quote` 样式有效）

prefix / suffix 图标

前后缀图标支持三种格式：

格式	示例	说明
Iconify 名称	`prefix="bxs:quote-left"`	推荐使用，图标来自 Iconify
图片地址	`prefix="@img/blog/my-post/icon.svg"`	自定义图片，支持 `@img/`、相对路径和外链
纯文本	`prefix="#"`	显示为纯文字

默认值：

quote 样式：prefix 默认为引号左图标，suffix 默认为引号右图标
badge 样式：prefix 默认为方形标签图标，suffix 无

隐藏前缀：prefix="false" 可去掉默认前缀。

进阶示例

演示效果示例代码

自定义前后缀图标

#纯文字前缀

居中紫色徽章阴影标题

:::title{style="quote" color="red" prefix="bxs:quote-left" suffix="bxs:quote-right"}
自定义前后缀图标
:::

:::title{style="badge" prefix="#" color="blue"}
纯文字前缀
:::

:::title{el="h3" centered="true" style="badge" color="purple" shadow="true"}
居中紫色徽章阴影标题
:::

段落引号（blockquote）

带引号装饰的引用段落，适合长段引用。

演示效果示例代码

这是使用 blockquote 指令的引用示例。
支持多段落内容，适合引用长段文字或他人的精彩论述。顶部左右角会自动显示引号图标作为装饰。

:::blockquote
这是使用 blockquote 指令的引用示例。

支持多段落内容，适合引用长段文字或他人的精彩论述。顶部左右角会自动显示引号图标作为装饰。
:::

使用 <blockquote> 标签包裹内容
顶部左右角自动显示引号图标
支持多段落 Markdown 内容

代码技术

代码块

所有 ``` 代码块都显示成 mac 窗口的样式：左上角三个圆点，标题栏居中显示标题，右边是复制按钮。

标题默认是语言名（比如 TypeScript），写了 title 就用 title，适合写文件名
bash、sh、shell、zsh、console、fish 这几种 shell 语言按终端处理，还能写命令提示符（见下方）
写 no-title 就是不带窗口的普通代码块；markdown 代码块也保持普通样式，方便展示原始写法

演示效果示例代码

vite.config.ts

import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [tailwindcss()] })

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ plugins: [tailwindcss()] })

Git 操作

git initgit add .git commit -m "init"

git init
git add .
git commit -m "init"

zsh

~❯node -vv22.11.0~/projects❯git clone https://github.com/your-name/my-blog.gitCloning into 'my-blog'...~/projects/my-blog❯pnpm installDone in 3.2s

node -v
git clone https://github.com/your-name/my-blog.git
pnpm install

const message = 'no-title：不带窗口的普通代码块'

```ts title="vite.config.ts" highlight="2"
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ plugins: [tailwindcss()] })
```

```bash title="Git 操作" linenos
git init
git add .
git commit -m "init"
```

```bash title="zsh"
$ node -v
v22.11.0
~/projects$ git clone https://github.com/your-name/my-blog.git
Cloning into 'my-blog'...
~/projects/my-blog$ pnpm install
Done in 3.2s
```

```ts no-title
const message = 'no-title：不带窗口的普通代码块'
```

title：窗口标题，不写时用语言名
linenos：显示行号
highlight：高亮指定行号
no-title：不带窗口，渲染成普通代码块
命令提示符（只对 shell 语言生效）：以 $ 开头的行算命令，会显示成「路径 ❯」样式的提示符，其余行算命令输出。复制按钮只复制命令，用鼠标框选复制时也只会选中命令，提示符和输出都不会被复制
- $ 前面写的内容就是这一行的路径，比如 ~/projects$ git clone …；$ 前面什么都不写时路径是 ~
- 输出里要显示 $ 时写成 \$（比如 Total \$ 5），这一行就不会被当成命令，显示时会去掉反斜杠

代码面板（panel）

将多个相关代码块或文字段落放入同一个面板中并列展示。每段有独立的左侧标签和右侧说明，支持每段单独复制。

适用于多语言代码对比、前后端配对、请求与响应、多环境配置对比、文字内容分段等场景。

代码块模式文字内容模式示例代码

发送端

Objective-C

+ (void)test {
    [[NSNotificationCenter.defaultCenter
        postNotificationName:@"test" object:nil];
}

+ (void)test {
    [[NSNotificationCenter.defaultCenter
        postNotificationName:@"test" object:nil];
}

订阅端

Swift

func setup() {
    list.add(title: "test") { section in
        section.add(title: "设置 Observer") {
            NotificationCenter.default.addObserver(...)
        }
    }
}

func setup() {
    list.add(title: "test") { section in
        section.add(title: "设置 Observer") {
            NotificationCenter.default.addObserver(...)
        }
    }
}

精简版

1 分钟

创建项目只需一行命令：

bash

npx create-my-app

npx create-my-app

详细版

5 分钟

确保 Node.js ≥ 18
运行 npx create-my-app
按提示选择模板
进入目录运行 npm run dev

代码块模式：

:::panel
```objc title="发送端" right="Objective-C"
+ (void)test {
    [[NSNotificationCenter.defaultCenter
        postNotificationName:@"test" object:nil];
}
```

```swift title="订阅端" right="Swift"
func setup() {
    list.add(title: "test") { section in
        ...
    }
}
```
:::

文字内容模式：

:::panel

<!-- label: 精简版 | 1 分钟 -->
创建项目只需一行命令：

```bash
npx create-my-app
```

<!-- label: 详细版 | 5 分钟 -->
1. 确保 Node.js ≥ 18
2. 运行 `npx create-my-app`

:::

代码块模式：title → 左侧标签，right → 右侧说明；未指定 title 时使用语言名作为左侧标签
文字内容模式： 用 | 分隔左右标签；省略 | 及之后内容则只有左侧标签
两种模式可以在同一个 panel 中混合使用
鼠标悬停在段落上，右侧显示 Copy 按钮，点击可复制该段代码

私密内容（private）

将敏感内容放入加密容器，读者需要输入正确密码才能查看。支持密码提示和重新锁定。

演示效果示例代码

私密内容

这部分内容已加密，输入密码后查看

提示：主题名称

密码不对，再试一次

:::private{password="vergil" hint="主题名称"}
这是加密的内容，只有知道密码的人才能看到。

- API 密钥：`sk-xxxxxxxxx`
- 数据库密码：`my-secret-pass`
:::

password（必填）：解密密码
hint（可选）：密码提示，帮助读者回忆密码
支持段落、列表、代码块等任意 Markdown 内容
解密后显示 重新锁定 按钮，可再次隐藏内容
采用 AES-CBC + PBKDF2 加密，密码不会存储在页面中

复制块（copy）

带一键复制按钮的代码块，方便读者复制命令或代码。

演示效果示例代码

安装依赖

SSH 密钥

Docker 命令

:::copy{label="安装依赖"}
pnpm add remark-directive unist-util-visit
:::

:::copy{label="SSH 密钥"}
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIExampleKey example@example.com
:::

:::copy{label="Docker 命令"}
docker run -d -p 3000:3000 --name myapp myimage:latest
:::

label：左侧标签文字，说明代码用途
内容区域会被处理为一行纯文本，点击右侧按钮即可复制