682 字
3 分钟
页面浏览--访问次数--
提示容器

提示容器用于在文章中高亮特定级别的提示、警告、注意或可折叠区域,严格遵循 Material 3 Expressive 的容器表面分层设计。

语法格式#

支持方括号标题与空格标题两种书写形式:

::: tip[操作提示]
建议在修改核心配置前先运行类型检查。
:::
::: warning 部署前检查
若未配置正式域名,社交分享卡片可能无法正确生成。
:::

两种写法完全等价,方括号形式更适合标题中包含空格或标点的场景。

渲染效果:

全部容器类型#

::: info 相关参考
关于双仓架构的更多细节,请参阅内容分离指南。
:::
::: caution 破坏性操作
执行此命令将清除本地未提交的改动。
:::
::: important 关键结论
构建产物的体积直接决定首屏耗时。
:::
::: note 普通笔记
这一条只是补充记录,不构成操作建议。
:::

渲染效果:

折叠面板 details#

details 容器渲染为原生的 <details> 折叠组件,适合放置日志、长清单与可选的补充说明:

::: details 点击展开详细日志
构建过程的详细输出如下:
- 同步完成
- 生成静态 HTML 成功
:::

渲染效果:

点击展开详细日志

构建过程的详细输出如下:

  • 同步完成
  • 生成静态 HTML 成功

支持的容器类型一览#

类型语义视觉风格
tip技巧与建议强调色彩容器与灯泡图标
info补充信息主色调表面与信息图标
warning注意与预警警示色调与三角感叹号
caution危险操作错误色调与高对比警示框
important关键重点鲜亮强调容器
note普通笔记中性表面容器
details折叠面板带箭头的原生 details 折叠组件

容器内部可以放什么#

容器内部是完整的 Markdown 上下文,可以嵌套列表、代码块、表格乃至其它容器:

::: warning 依赖版本要求
本地 Node.js 版本必须满足 `>= 22.12`:
```bash
node -v
```
:::

渲染效果:

第 11 篇,共 30 篇本文属于系列

提示容器
https://www.ariels.xyz/posts/markdown-admonitions/
作者
Ariel
发布于
2026-09-27
许可协议
CC BY-NC-ND 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...