755 字
4 分钟
页面浏览--访问次数--
Markdown 提示容器

提示容器遵循 Material 3 Expressive 的容器表面分层设计,共 7 种类型,可以带自定义标题,也可以做成可折叠面板。

七种类型#

效果

DETAILS

折叠面板:带箭头的原生 details,点击标题展开。

源码(每种类型用 3 个冒号包裹,开闭成对)

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

两种自定义标题写法#

效果

源码

:::tip[方括号标题]
标题写在方括号里。
:::
:::warning 空格标题
标题直接跟在类型名后面,不用方括号。
:::

容器内容可以是完整 Markdown#

效果

构建日志摘要

构建过程的关键输出:

  • 同步内容仓:完成
  • 生成静态 HTML:完成
  • 建立搜索索引:完成
Terminal window
pnpm build

源码

:::details 构建日志摘要
构建过程的关键输出:
- 同步内容仓:完成
- 生成静态 HTML:完成
- 建立搜索索引:完成
```bash
pnpm build
```
:::

说明与边界#

  • details 用原生 <details> 实现,不需要 hydration,键盘可操作;
  • 容器内可以嵌列表、代码块、表格、甚至其它容器;
  • 本仓实测:容器标题支持行内 Markdown——下面这个标题里的代码、粗体与链接都是真渲染出来的:
  • 本仓实测:在提示容器后面追加属性字典(如 :::tip[标题]{class="x"})不会报错,但 class 会被丢弃、不会应用到元素上,详见扩展与属性一篇。

第 10 篇,共 23 篇本文属于系列

Markdown 提示容器
https://www.klucen.cn/posts/博客搭建/markdown-admonitions/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

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

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时