想问一下官方教程里的 小标签 是如何实现的

疑问解答
1

贡献者 - Obsidian 中文帮助 - Obsidian Publish

在人名旁边有个紫色的框框，想问一下这个是怎么在Note里实现的？

image

2

把网页的css样式扒下来就好了，例如这样添加css脚本可以让加粗或标签的样式改为紫色框

/* 修改标签样式为紫色框 */
span.cm-hashtag,
a.tag,
/* 修改加粗样式为紫色框 */
strong,
.cm-strong{
    background-color: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.075));
    border-radius: 4px!important;
    color: rgb(255, 255, 255);
    letter-spacing: 0.05em;
    margin-inline-start: var(--size-4-2);
    padding: var(--size-2-1) var(--size-2-2);
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    font-family:"??", ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, "Segoe UI", Inter, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-weight:normal;
}

/* 隐藏编辑模式标签头 */
.cm-hashtag.cm-hashtag-begin.cm-meta{
display:none
}

效果如图（左编辑右预览）：

image
image1178×177 14.8 KB

如何添加css脚本：【新手向教程】OB样式调整基础课：CSS入门科普

1 个赞
3

太感谢了！

我从官网上扒下来

.flair {
background-color: var(--interactive-normal);
border-radius: var(--radius-s);
color: var(--text-normal);
font-size: 10px;
letter-spacing: 0.05em;
margin-inline-start: var(--size-4-2);
padding: var(--size-2-1) var(--size-2-2);
position: relative;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.flair.mod-flat {
vertical-align: top;
}
.flair.mod-pop {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}

然后现在在笔记里用 <span class="flair mod-pop"> XXX </span> 调用

请问除此之外还有什么别的更方便的方式吗？这种方式能否兼容官方的Publish功能？（没什么代码经验）

1 个赞
4

比较方便的就是像我上面发的把某个原生样式（加粗、标签、高亮）替换成紫框样式
兼容外部的好像还没有方案，一般都是本地用