Callout
callout 是 obsidian 的特有语法,源于 markdown 的引用语法 >
除了 obsidian,其实在很多地方你都能看到类似的样式,举几个例子
语法
基本使用
> [!NOTE] Title
> Content
复制上面两行内容粘贴到 obsidian 中,他们会自动渲染成 callout 的样式。
分为四个部分:
- 开头的 >
- 标明 callout 类型的 NOTE
- Callout 的标题 Title
- Callout 的正文 Content
obsidian 共提供了 13 种 callout
- 他们是大小写不敏感的,例如> [!BUG],> [!bug] 和 > [!Bug] 的效果是一样的;
- 同一类型的 callout 可能有很多种别名,例如 > [!info] 和 > [!todo] 的样式是一样的;
- note
- abstract, summary, tldr
- info
- todo
- tip, hint, important
- success, check, done
- question, help, faq
- warning, caution, attention
- failure, fail, missing
- danger, error
- bug
- example
- quote, cite
Callout 的展开与折叠
> [!NOTE]+ 左边多了个加号
> 代表 Callout 默认展开
> [!NOTE]- 左边多了个减号
> 代表 Callout 默认折叠
Callout 的嵌套使用
每到下一层多加个一个 > 即可,例如
> [!question] Can callouts be nested?
> > [!todo] Yes!, they can.
> > > [!example] You can even use multiple layers of nesting.
Callout 的换行
要换行的地方用 > 连接保证 Callout 不断即可,你也可以直接用 shift enter 换行,这样 obsidian 会自动补充开头的 >
> [!NOTE] Callout 的换行
> 第一行
>
> 第二行
Callout 自定义
如果你觉得 obsidian 提供的 13 种 callout 都不适用于你当前需要的场景,你还可以用 obsidian 提供的两个 css 变量自定义 callout
--callout-color
--callout-icon
- 前者用于控制 callout 的颜色
- 后者用于控制 callout 的图标,图标代码可以从 Lucide 找到,也可以使用自己找的 svg 图标
举个例子,如果你想要获得一个名为 custom-question-type 的 Callout,那么你只需要创建一个 css 文件(Obsidian的CSS代码片段 中有关于创建 css 的教程,熟练的话一两分钟就能搞定),在里面写到
.callout[data-callout="custom-question-type"] {
--callout-color: 0, 0, 0;
--callout-icon: lucide-alert-circle;
}
之后你可以在笔记中用到
> [!custom-question-type] Title
> Contents
需要注意,Callout 的名称中不能包含空格。
使用 svg 作为图标的格式为
--callout-icon: '<svg>...custom svg...</svg>';
你可以在 Obsidian样式-Callout样式 中找到许多已经写好的 callout 样式,直接放到你的库的配置文件中即可使用。
修改图标和颜色足以实现大部分 callout 的自定义,下面给出另一种 callout 自定义的玩法:添加修饰词而非创建新的 callout 名称
这种用法也挺常见,例如 blue topaz 主题的实现 callout 的百分比显示
> [!Note|50%] Title
> Content
css 代码如下
.callout[data-callout-metadata*="..."] {
...
}
把原来的 data-callout=”..” 替换为 data-callout-metadata*=”..”。
= 代表需要严格等于,而*= 代表包含后面的字符
同样,在 Obsidian样式-用Callout实现的边注 也是使用了这种方式
讨论
若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。
反馈交流
其他渠道
版权声明
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。