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:完成
- 建立搜索索引:完成
pnpm build源码
:::details 构建日志摘要
构建过程的关键输出:
- 同步内容仓:完成- 生成静态 HTML:完成- 建立搜索索引:完成
```bashpnpm build```
:::说明与边界
details用原生<details>实现,不需要 hydration,键盘可操作;- 容器内可以嵌列表、代码块、表格、甚至其它容器;
- 本仓实测:容器标题支持行内 Markdown——下面这个标题里的代码、粗体与链接都是真渲染出来的:
- 本仓实测:在提示容器后面追加属性字典(如
:::tip[标题]{class="x"})不会报错,但class会被丢弃、不会应用到元素上,详见扩展与属性一篇。
分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 301 天
部分内容可能已过时
评论