𝐿𝑖𝑢𝑤𝑒𝑖'𝑠 𝐷𝑜𝑐𝑠

[!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]-
内嵌代码的支持并不友好

提示

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

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

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

<div>
    <div data-callout-metadata="" data-callout-fold="" data-callout="note" class="callout">
        <div class="callout-title">
            <div class="callout-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="svg-icon lucide-pencil">
                    <line x1="18" y1="2" x2="22" y2="6"></line>
                    <path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path>
                </svg>
            </div>
            <div class="callout-title-inner"> 有如下类型可供使用：</div>
        </div>
        <div class="callout-content">
            <ul class="has-list-bullet">
                <li data-line="1">
                    <div class="list-bullet"></div>note、abstract、info、todo、tip、success、question
                </li>
                <li data-line="2">
                    <div class="list-bullet"></div>warning、failure、danger、bug、example、quote
                </li>
            </ul>
        </div>
    </div>
</div>

自定义的 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

重要

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>渲染成这是加下划线的文本
将<mark>高亮效果文字</mark>渲染成高亮效果文字