文章
文章用户商铺文档快讯圈子网址导航问答

obsidian提示标签美化

标签效果

obsidian提示标签美化

添加alerts.css代码到snippets即可

body {
    /*obsidian中有定义*/
    --color-red-rgb: 208, 66, 85;
    --color-orange-rgb: 213, 118, 63;
    --color-yellow-rgb: 229, 181, 103;
    --color-green-rgb: 168, 195, 115;
    --color-cyan-rgb: 115, 187, 178;
    --color-blue-rgb: 108, 153, 187;
    --color-purple-rgb: 158, 134, 200;
    --color-gray-rgb: 158, 158, 158;

    --color-pink-rgb: 176, 82, 121;
    /*alerts颜色*/
    --color-red-alerts-rgb: 255, 72, 72;
    --color-orange-alerts-rgb: 255, 165, 0;
    --color-yellow-alerts-rgb: 238, 198, 0;
    --color-green-alerts-rgb: 0, 200, 43;
    --color-cyan-alerts-rgb: 0, 205, 205;
    --color-blue-alerts-rgb: 30, 144, 255;
    --color-purple-alerts-rgb: 155, 48, 255;
    --color-grey-alerts-rgb: 96, 96, 96;
    /*背景色*/
    --callout-default: var(--color-blue-rgb);
    --callout-info: var(--color-blue-rgb);
    --callout-todo: var(--color-blue-rgb);
    --callout-tip: var(--color-cyan-rgb);
    --callout-important: var(--color-cyan-rgb);
    --callout-summary: var(--color-cyan-rgb);
    --callout-fail: var(--color-red-rgb);
    --callout-error: var(--color-red-rgb);
    --callout-bug: var(--color-red-rgb);
    --callout-example: var(--color-purple-rgb);
    --callout-question: var(--color-yellow-rgb);
    --callout-success: var(--color-green-rgb);
    --callout-warning: var(--color-orange-rgb);
    --callout-quote: var(--color-gray-rgb);
    /*alerts背景色*/
    --callout-alerts-default: var(--color-blue-alerts-rgb);
    --callout-alerts-info: var(--color-blue-alerts-rgb);
    --callout-alerts-todo: var(--color-blue-alerts-rgb);
    --callout-alerts-tip: var(--color-cyan-alerts-rgb);
    --callout-alerts-important: var(--color-cyan-alerts-rgb);
    --callout-alerts-summary: var(--color-cyan-alerts-rgb);
    --callout-alerts-fail: var(--color-red-alerts-rgb);
    --callout-alerts-error: var(--color-red-alerts-rgb);
    --callout-alerts-bug: var(--color-red-alerts-rgb);
    --callout-alerts-example: var(--color-purple-alerts-rgb);
    --callout-alerts-question: var(--color-yellow-alerts-rgb);
    --callout-alerts-success: var(--color-green-alerts-rgb);
    --callout-alerts-warning: var(--color-orange-alerts-rgb);
    --callout-alerts-quote: var(--color-grey-alerts-rgb);
}

.callout {
    --callout-color: var(--callout-default);
    --callout-icon: lucide-pencil;
    padding: 0px;
    margin: 20px 0;
    /* border-left: 0.1rem solid rgb(var(--callout-color)); */
    border-width: 2px;
    border-radius: 4px;
    border-color: rgba(var(--callout-color), 0.65);
    background-color: rgba(var(--callout-color), 0.2);
    color: rgba(var(--callout-color), 1);
    position: relative;
}

/* 设置标签标题文本推进边距 */
.callout .callout-title {
    padding: 15px 0 15px 20px;
    background-color: var(--callout-color);
}

/* 文本样式 */
.callout-title-inner {
    padding-left: 4px;
}

.callout .callout-content {
    background-color: var(--color-base-00);
    padding: 0px 15px 0px 20px;
}

/*处理编辑模式下样式异常问题*/
.markdown-source-view.mod-cm6 .callout {
    margin: 20px 0;
}

.callout-content pre {
    background: rgba(156, 156, 156, 0.2);
}

/* 暗黑模式下颜色调整 */
/*.theme-dark .callout {
    box-shadow: 0 0.2rem 0.5rem rgba(54, 54, 54, 0.2);
}*/

/*默认*/
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
    --callout-color: var(--callout-summary);
    --callout-icon: lucide-clipboard-list;
}

.callout[data-callout="info"] {
    --callout-color: var(--callout-info);
    --callout-icon: lucide-info;
}

.callout[data-callout="todo"] {
    --callout-color: var(--callout-todo);
    --callout-icon: lucide-check-circle-2;
}

.callout[data-callout="important"] {
    --callout-color: var(--callout-important);
    --callout-icon: lucide-flame;
}

.callout[data-callout="tip"],
.callout[data-callout="hint"] {
    --callout-color: var(--callout-tip);
    --callout-icon: lucide-flame;
}

.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
    --callout-color: var(--callout-success);
    --callout-icon: lucide-check;
}

.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"] {
    --callout-color: var(--callout-question);
    --callout-icon: help-circle;
}

.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
    --callout-color: var(--callout-warning);
    --callout-icon: lucide-alert-triangle;
}

.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
    --callout-color: var(--callout-fail);
    --callout-icon: lucide-x;
}

.callout[data-callout="danger"],
.callout[data-callout="error"] {
    --callout-color: var(--callout-error);
    --callout-icon: lucide-zap;
}

.callout[data-callout="bug"] {
    --callout-color: var(--callout-bug);
    --callout-icon: lucide-bug;
}

.callout[data-callout="example"] {
    --callout-color: var(--callout-example);
    --callout-icon: lucide-list;
}

.callout[data-callout="quote"],
.callout[data-callout="cite"] {
    --callout-color: var(--callout-quote);
    --callout-icon: quote-glyph;
}

/* 自定义 alerts 样式 */
.callout[data-callout="alerts-note"] {
    --callout-color: var(--callout-alerts-default);
    --callout-icon: lucide-pencil;
}

.callout[data-callout="alerts-abstract"],
.callout[data-callout="alerts-summary"],
.callout[data-callout="alerts-tldr"] {
    --callout-color: var(--callout-alerts-summary);
    --callout-icon: lucide-clipboard-list;
}

.callout[data-callout="alerts-info"] {
    --callout-color: var(--callout-alerts-info);
    --callout-icon: lucide-info;
}

.callout[data-callout="alerts-todo"] {
    --callout-color: var(--callout-alerts-todo);
    --callout-icon: lucide-check-circle-2;
}

.callout[data-callout="alerts-important"] {
    --callout-color: var(--callout-alerts-important);
    --callout-icon: lucide-flame;
}

.callout[data-callout="alerts-tip"],
.callout[data-callout="alerts-hint"] {
    --callout-color: var(--callout-alerts-tip);
    --callout-icon: lucide-flame;
}

.callout[data-callout="alerts-success"],
.callout[data-callout="alerts-check"],
.callout[data-callout="alerts-done"] {
    --callout-color: var(--callout-alerts-success);
    --callout-icon: lucide-check;
}

.callout[data-callout="alerts-question"],
.callout[data-callout="alerts-help"],
.callout[data-callout="alerts-faq"] {
    --callout-color: var(--callout-alerts-question);
    --callout-icon: help-circle;
}

.callout[data-callout="alerts-warning"],
.callout[data-callout="alerts-caution"],
.callout[data-callout="alerts-attention"] {
    --callout-color: var(--callout-alerts-warning);
    --callout-icon: lucide-alert-triangle;
}

.callout[data-callout="alerts-failure"],
.callout[data-callout="alerts-fail"],
.callout[data-callout="alerts-missing"] {
    --callout-color: var(--callout-alerts-fail);
    --callout-icon: lucide-x;
}

.callout[data-callout="alerts-danger"],
.callout[data-callout="alerts-error"] {
    --callout-color: var(--callout-alerts-error);
    --callout-icon: lucide-zap;
}

.callout[data-callout="alerts-bug"] {
    --callout-color: var(--callout-alerts-bug);
    --callout-icon: lucide-bug;
}

.callout[data-callout="alerts-example"] {
    --callout-color: var(--callout-alerts-example);
    --callout-icon: lucide-list;
}

.callout[data-callout="alerts-quote"],
.callout[data-callout="alerts-cite"] {
    --callout-color: var(--callout-alerts-quote);
    --callout-icon: quote-glyph;
}

/* 自定义 callout blocks */
/* 用 callout blocks 实现高亮块功能 */

/* 匹配开头设置样式 */
/* .callout[data-callout|="color"] {
    background-color: rgba(var(--callout-color),0.05);
    border: 2px solid rgba(var(--callout-color),0.5);
} */

.callout[data-callout|="color"] .callout-content {
    background-color: rgba(var(--callout-color), 0.1);
    color: rgba(var(--callout-color),1);
    font-weight: 400;
}
.callout[data-callout|="color"] .callout-content pre
{
    margin: 20px 0 20px 0;
}

.callout[data-callout|="color"] .callout-title {
    display: none;
}

/* .callout[data-callout="color-orange"] {
    --callout-color: 254, 234, 210;
    border: 2px solid rgb(254, 212, 164);
    color: rgb(222, 120, 2);
} */

.callout[data-callout="color-red"] {
    --callout-color: var(--color-red-rgb);
}

.callout[data-callout="color-orange"] {
    --callout-color: var(--color-orange-rgb);
}

.callout[data-callout="color-yellow"] {
    --callout-color: var(--color-yellow-rgb);
}

.callout[data-callout="color-green"] {
    --callout-color: var(--color-green-rgb);
}

.callout[data-callout="color-cyan"] {
    --callout-color: var(--color-cyan-rgb);
}

.callout[data-callout="color-blue"] {
    --callout-color: var(--color-blue-rgb);
}

.callout[data-callout="color-purple"] {
    --callout-color: var(--color-purple-rgb);
}

.callout[data-callout="color-gray"] {
    --callout-color: var(--color-gray-rgb);
}


.callout[data-callout="color-alerts-red"] {
    --callout-color: var(--color-red-alerts-rgb);
}

.callout[data-callout="color-alerts-orange"] {
    --callout-color: var(--color-orange-alerts-rgb);
}

.callout[data-callout="color-alerts-yellow"] {
    --callout-color: var(--color-yellow-alerts-rgb);
}

.callout[data-callout="color-alerts-green"] {
    --callout-color: var(--color-green-alerts-rgb);
}

.callout[data-callout="color-alerts-cyan"] {
    --callout-color: var(--color-cyan-alerts-rgb);
}

.callout[data-callout="color-alerts-blue"] {
    --callout-color: var(--color-blue-alerts-rgb);
}

.callout[data-callout="color-alerts-purple"] {
    --callout-color: var(--color-purple-alerts-rgb);
}

.callout[data-callout="color-alerts-gray"] {
    --callout-color: var(--color-grey-alerts-rgb);
}

obsidian演示 Markdown 文件

## 使用callouts

从 v0.14.0 开始，黑曜石支持标注块，有时称为“admonitions”。标注块被编写为块引用，灵感来自 Microsoft Docs 中的“alert”语法。

## callout 默认类型

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

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

> [!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 进行自定义：

```css
.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
```

```html
<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



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

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

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

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

> [!color-red-light]
> 测试内容

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

> [!color-gray-light]
> 测试内容
> 
> ```python
> 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会存在标签无法正常展开和关闭的问题，可以添加以下代码实现


```js
<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/Various Complements]] 插件实现自动补全代码的功能。
> 
> 相关的词典代码为 [[obsidian/setting/custom-dictionary/alert-code]]
@版权声明 1 本站名称：Liuwei's Blog
2 本站网址：https://www.liuwei.vin
3 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
5 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
6 本站所有内容，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
obsidian
个人网站群晖

群晖自动更新 Let’s Encrypt 证书

2023-1-15 14:14:52

obsidian

时间戳笔记教程

2023-7-15 10:34:08

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • QQ扫描加群

返回顶部