Callouts Alert#

使用callouts#

callout 默认类型#

默认情况下，黑曜石支持多种标注类型和别名。每种类型都有不同的背景颜色和图标。

[!note] 有如下类型可供使用： - note、abstract、info、todo、tip、success、question - warning、failure、danger、bug、example、quote

### 标准

[!col-note ] Lorem ipsum dolor sit amet

[!note ] Lorem ipsum dolor sit amet

[!abstract] Lorem ipsum dolor sit amet

[!info] Lorem ipsum dolor sit amet

[!todo] Lorem ipsum dolor sit amet

[!tip] Lorem ipsum dolor sit amet

[!success] Lorem ipsum dolor sit amet

[!question] Lorem ipsum dolor sit amet

[!warning] Lorem ipsum dolor sit amet

[!failure] Lorem ipsum dolor sit amet

[!danger] Lorem ipsum dolor sit amet

[!bug] Lorem ipsum dolor sit amet

[!example] Lorem ipsum dolor sit amet

[!quote] Lorem ipsum dolor sit amet

[!important] Lorem ipsum dolor sit amet

### 下拉

[!note ]- Lorem ipsum dolor sit amet

[!abstract]- Lorem ipsum dolor sit amet

[!info]- Lorem ipsum dolor sit amet

[!todo]- Lorem ipsum dolor sit amet

[!tip]- Lorem ipsum dolor sit amet

[!success]- Lorem ipsum dolor sit amet

[!question]- Lorem ipsum dolor sit amet

[!warning]- Lorem ipsum dolor sit amet

[!failure]- Lorem ipsum dolor sit amet

[!danger]- Lorem ipsum dolor sit amet

[!bug]- Lorem ipsum dolor sit amet

[!example]- Lorem ipsum dolor sit amet

[!quote]- Lorem ipsum dolor sit amet

[!important]- Lorem ipsum dolor sit amet

标题和正文#

[!TIP] Callouts can have custom titles, which also supports markdown!

折叠 --

[!FAQ]- Are callouts foldable? Yes! In a foldable callout, the contents are hidden until it is expanded.

嵌套 --

[!question]- Can callouts be nested? > [!todo]- Yes!, they can. > > [!example]- You can even use multiple layers of nesting. > > You can even use multiple layers of nesting.

自定义 callout blocks#

可用如下代码对 callout 进行自定义：

.callout[data-callout="my-callout-type"] {
     --callout-color: 0, 0, 0;
     --callout-icon: icon-id;
     --callout-icon: '<svg>...custom svg...</svg>';
}

### 自定义的 callout blocks 显示效果

[!alerts-example]- alerts-example 我是 alerts-example

[!alerts-note]- 内嵌代码的支持并不友好

[!tip] 你可以使用 Ctrl+Shift+i 打开开发者模式以查询可以编辑的CSS样式

对于以下内容所对应的html代码为

[!note]  有如下类型可供使用：
- note、abstract、info、todo、tip、success、question
- warning、failure、danger、bug、example、quote

.. note::
有如下类型可供使用：


-  note、abstract、info、todo、tip、success、question
-  warning、failure、danger、bug、example、quote

### 自定义的 callout blocks 类型

#### 标准

[!alerts-note] Lorem ipsum dolor sit amet

[!alerts-abstract] Lorem ipsum dolor sit amet

[!alerts-info] Lorem ipsum dolor sit amet

[!alerts-todo] Lorem ipsum dolor sit amet

[!alerts-tip] Lorem ipsum dolor sit amet

[!alerts-success] Lorem ipsum dolor sit amet

[!alerts-question] Lorem ipsum dolor sit amet

[!alerts-warning] Lorem ipsum dolor sit amet

[!alerts-failure] Lorem ipsum dolor sit amet

[!alerts-danger] Lorem ipsum dolor sit amet

[!alerts-bug] Lorem ipsum dolor sit amet

[!alerts-example] Lorem ipsum dolor sit amet

[!alerts-quote] Lorem ipsum dolor sit amet

[!alerts-important] Lorem ipsum dolor sit amet

#### 下拉

[!alerts-note]- Lorem ipsum dolor sit amet

[!alerts-abstract]- Lorem ipsum dolor sit amet

[!alerts-info]- Lorem ipsum dolor sit amet

[!alerts-todo]- Lorem ipsum dolor sit amet

[!alerts-tip]- Lorem ipsum dolor sit amet

[!alerts-success]- Lorem ipsum dolor sit amet

[!alerts-question]- Lorem ipsum dolor sit amet

[!alerts-warning]- Lorem ipsum dolor sit amet

[!alerts-failure]- Lorem ipsum dolor sit amet

[!alerts-danger]- Lorem ipsum dolor sit amet

[!alerts-bug]- Lorem ipsum dolor sit amet

[!alerts-example]- Lorem ipsum dolor sit amet

[!alerts-quote]- Lorem ipsum dolor sit amet

[!alerts-important]- Lorem ipsum dolor sit amet

[!color-red] 测试内容

[!color-orange] 测试内容

[!color-yellow] 测试内容

[!color-green] 测试内容

[!color-cyan] 测试内容

[!color-blue] 测试内容

[!color-purple] 测试内容

[!color-gray] 测试内容

[!color-alerts-red] 测试内容

[!color-alerts-orange] 测试内容

[!color-alerts-yellow] 测试内容

[!color-alerts-green] 测试内容

[!color-alerts-cyan] 测试内容

[!color-alerts-blue] 测试内容

[!color-alerts-purple] 测试内容

[!color-alerts-gray] 测试内容

import




[!important]-
Lorem ipsum dolor sit amet close

[!important]-
Lorem ipsum dolor sit amet open

[!important]
Lorem ipsum dolor sit amet open

特别的 Obsidian 可以导出Html,此时导出的Html会存在标签无法正常展开和关闭的问题，可以添加以下代码实现#

<script>
     function find_parent_class(obj, name) {
             // 查询是否包含某类
             if (obj.classList.contains(name)) {
                     return [obj, true];
             }
             else {
                     // 遍历父对象
                     if (obj.parentNode == document) {
                             return [obj, false];
                     }
                     else {
                             return find_parent_class(obj.parentNode, name);
                     }
             }
     }
     function collapsed_change(obj) {
             // 如果classList中存在给定的值，删除它，否则，添加它；
             // callout is-collapsible is-collapsed
             var [findParent, findState] = find_parent_class(obj.parentNode, "is-collapsible");
             if (findState === true) {
                     // 切换 is-collapsed 属性
                     findParent.classList.toggle("is-collapsed");
                     var list = findParent.getElementsByClassName('callout-content');
                     if (list.length > 0) {
                             if (findParent.classList.contains("is-collapsed")) {
                                     list[0].style.display = "none";
                             }
                             else {
                                     list[0].style.display = "";
                             }
                     }
             }
     }
     window.onload = function () {
             // 获得某class的所有对象的方法: (返回的是数组)
             var list = document.getElementsByClassName('is-collapsible');
             for (i = 0; i < list.length; i++) {
                     // 获取子对象
                     var listChildren = list[i].getElementsByClassName('callout-title');
                     for (j = 0; j < listChildren.length; j++) {
                             listChildren[j].setAttribute("onclick", "collapsed_change(this)");
                     }
             }
     }
</script>



[!alert-tip]
必要的你可以配合 [[obsidian/archive/Obsidian Various Complements]] 插件实现自动补全代码的功能。

相关的词典代码为 [[obsidian/setting/dictionary/alerts-code]]

文本样式#

  • 将 *需要斜体的文字* 渲染成 需要斜体的文字，快捷键 Ctrl/Cmd**+ **I。

  • 将 **需要加粗的文字** 渲染成 需要加粗的文字，快捷键 Ctrl/Cmd**+ **B。

  • 将 ***需要加粗并且斜体的文字*** 渲染成 *需要加粗并且斜体的文字*，快捷键 Ctrl/Cmd**+ **B**+**I。

  • 将 ==荧光效果文字== 渲染成 ==荧光效果文字==。

  • 将 ~~这是加删除线的文本~~ 渲染成 ~~这是加删除线的文本~~。

  • 将`<u>这是加下划线的文本</u>`渲染成 <u>这是加下划线的文本</u>

  • 将`<mark>高亮效果文字</mark>`渲染成 <mark>高亮效果文字</mark>