Obsidian callout 快捷方法
3 min read

Obsidian callout 快捷方法

了解 Obsidian callout 的技术细节,为在 Obsidian 输入 callout 实现一种快捷的方式
Obsidian callout 快捷方法
photo by https://unsplash.com/photos/vazjaqOpY9g

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,效果如下图所示: 
personal customized callout box
  • QuickAdd 命令操作,效果如下图所示:
0:00
/
callout QuickAdd command operation

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

quickadd data.json

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

Public discussion