Callout提示框

Callout 提示框 是吸引读者对某些补充内容额外注意的方式

1 标注类型

当前共有五种不同类型的标注块可供使用 :

类型 关键字 语法
注释、提示 note .callout-note
警告 warning .callout-warning
重要 important .callout-important
技巧、建议 tip .callout-tip
注意 、 谨慎 caution .callout-caution

类型不同颜色和图标会不同, 参考下面范例 :

Note

共有五种类型的Callout提示框,包括:note (注释)、tip (提示)、warning (警告)、caution (注意)和important (重要)

Warning

Callout提示框提供了一种简单的方式来吸引注意力,例如,用于指出这个警告

Important

Callout提示框的标题由标注类型本身提供,使用对应的默认标题(即 Note、Warning、Important、Tip 或 Caution)。

Tip

这是一个带标题的Callout提示框示例。提供Callout提示框标题是可选的。

这是一个 “已折叠” 的 .caution 框, 用户可自行将其展开。用 collapse="true" 让它默认折叠,或用 collapse="false" 生成一个默认展开的可折叠标注块

2 语法

下面是 Callout 的语法 :

标题还可以使用 Callout 的属性来定义 :

3 自定义外观

除了上面的标准外观, 还有很多外观是可以自定义

3.1 折叠

无论将 collapse 属性设置成 true 还是 false, 都有 “折叠式” 提示框。区分是默认为展开还是折叠 :

3.2 风格

Callouts 共有 3 种不同的外观可供使用 :

外观 说明
default 默认外观,带彩色头部和图标
simple 较轻量的外观,不含彩色头部背景
minimal 极简处理,只给标注框加边框,但不含头部背景色或图标

下面是几种外观的效果图 :

可以在文档的 YAML 中全局设置 :

还可以针对每个 Callout 进行单独的外观设计 :

3.3 图标

还可以在 YAML 中控制图标是否显示 :

还可以为某个 Callout 单独设置 :

4 支持的格式

以下格式会像上面展示的那样渲染标注框:

  • format: html
  • format: pdf
  • format: typst
  • format: docx
  • format: epub
  • format: revealjs (无折叠选项)

当禁用标准 HTML 主题 时 Callout 将不可用 :

5 交叉引用

提示框可以被交叉引用,每种都有自己的前缀 :

类型 关键字 语法 前缀
注释、提示 note .callout-note #nte-
警告 warning .callout-warning #wrn-
重要 important .callout-important #imp-
技巧、建议 tip .callout-tip #tip-
注意 、 谨慎 caution .callout-caution #cau-

交叉引用的提示文字可以被修改 :

6 链接