Obsidian callout 快捷方法

Obsidian 支持 callout （也称作 Admonition）语法用于显示类似 MkDocs Material Theme 的 Admonition Box 效果，日常使用 Obsidian 写 markdown 过程中会用到 callout 帮助文本增加提示、标注等额外信息，由于语法设计的原因 callout 有很多需要记忆和输入的东西，这里有可以提升效率的地方。

Obsidian callout 前世今生

先简单梳理一下 Obsidian callout 的历史，关于 callout 大致分为三个阶段：

• Obsidian < v0.11.8 的阶段，Obsidian 不支持 callout 语法和渲染
• Obsidian < v0.14.0 的阶段，对于 callout 渲染支持需要借助 obsidian-admonition 插件来实现
• Obsidian ≧ v0.14.0 的阶段，Obsidian 官方开始支持 callout

根据 Obsidian 社区的描述，Obsidian callout 语法渲染实现与 Microsoft Docs 保持一致，都是遵照 CommonMark Specification，具体的做法是利用 blockquote 实现 callout 效果渲染，具体语法如下所示：

<!-- 默认语法 -->
> [!INFO]
> Here's a callout block.

<!-- title&body 语法 -->
> [!INFO] here is title
> here is body.

<!-- folding 语法 -->
> [!INFO] -
> folded callout block.

<!-- nested 语法 -->
> [!INFO]
> > [!todo] second nested callout block.
> > > [!example] third nested callout block.

callout 快速输入

由于 callout 需要输入 quoteblock + keyword + style 等诸多内容，显然有效率提升的必要。

使用需求

我自己日常在 Obsidian 中输入 callout 的时候，会遇到几个痛点：

• callout 语法关键字很多，会经常忘记；
• callout 语法需要输入的内容，而这些内容跟正文无关；
• callout 原生渲染样式和关键字支持比较少，无法满足所有写作场景；

快捷方法设计

对于解决上面的需求有一个比较简单直接的思路：

1. 自定义 callout，增加关键字支持，增加样式配置（css style + svg）；
2. QuickAdd 增加一个 Multi Macro 和若干 Capture，每个 Capture 根据关键字添加 callout format content；
3. 给 QuickAdd Multi Macro 增加一个快捷键；

效果演示

• 在 obsidian 设置中的 css snippets 增加 callout 自定义配置，具体方法参考 callout customization help，效果如下图所示： 

• QuickAdd 命令操作，效果如下图所示：

TODO

关于上面的实现方法简单的总结一下还有待优化的地方：

• Caputure 很多，如果能做到类似 Template 中的变量替换的话，就可以大大减少 Capture 的配置和维护；
• callout CSS 配置目前主要是借鉴了 Primary Theme，自己认为与 Microsoft 的 callout 样式还有差距，需要重新优化；

snippets

上述的实现方法附上 code snippets 方便有需要的人引用，当然也会放到 github gist，不过国内的同学需要懂得如何访问 github gist 才行。使用方法也很简单（如果全量较大可以按需选择关键字）：

• css snippets 中增加 callout css 配置；
• quickadd data.json 增加到 {vault-path}/.obsidian/plugins/quickadd/data.json 中即可；

callout css

• callout.css in gist

quickadd data.json

• data.json in gist

References

1. Admonitions - Material for MkDocs
2. squidfunk/mkdocs-material
3. Markdown reference for Microsoft Learn | Microsoft Learn
4. CommonMark
5. Use callouts - Obsidian Help
6. Getting Started | QuickAdd