无序列表和有序列表能带个范围框。
试过在别的大佬的主体里面把这个CSS文件攫取下来,但是一直没成功。
1 个赞
这是从老版本(0.14)topaz系列主题中抠下来的, 但是我为了让它跟我的主题色联动, 使用了很多变量; 所以直接粘贴是使用不了的;
你需要把所有var(--????)
替换成一个具体的颜色
比如 var(--list-ul-hover)
替换成 #ff0000
具体使用什么颜色可以自己调
(obsidian-设置-外观-主题色中可以选颜色并复制色值)
(你从别处复制的css片段如果使用不了也可以试着这样检查)
另外,这个片段来自于老版本, 跟1.0以后的默认缩进线有冲突, 多层嵌套会同时显示(如下图的 5.
)
先看默认主题下的效果:
/*
----------------------------------------
list-有序列表和无序列表的曲线-@golden topaz
----------------------------------------
*/
/*list*/
.cm-hmd-list-indent .cm-tab::before/*,
ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before*/ {
content: '';
border-left: 2px solid var(--background-modifier-border);
position: absolute;
height: 100%;
margin-left: 3px;
}
.cm-formatting.cm-formatting-list.cm-formatting-list-ol {
color: var(--text-accent);
}
.cm-formatting.cm-formatting-list.cm-formatting-list-ul {
color: #da8507;
}
/* inspired by Gabroel from Obsidian discord group */
/* https://discord.com/channels/686053708261228577/702656734631821413/784922140465692712 */
li > p:not(.task-list-item) {
margin-top: 5px;
margin-bottom: 5px;
}
ul,
ol ul,
ol ol ul,
ol ol ol ul {
list-style: disc;
}
ul ul,
ol ul ul,
ul ol ul,
ol ol ul ul {
list-style: circle;
}
ul ul ul,
ol ul ul ul,
ul ol ul ul,
ul ul ol ul {
list-style: square;
}
ul ul ul ul,
ol ul ul ul ul,
ul ol ul ul ul,
ul ul ol ul ul,
ul ul ul ol ul {
list-style: circle;
}
ul > li:not(.task-list-item) {
margin-left: -5px;
padding-left: 6px;
border-radius: 5px;
width: fit-content;
margin-bottom: 6px;
margin-top: 4px;
padding-right: 6px;
word-wrap: break-word;
word-break: break-word;
transition: all 300ms ease-in-out;
}
.theme-dark ul > li:not(.task-list-item) {
border-left: 2px solid var(--list-ul-block-color);
}
.theme-light ul > li:not(.task-list-item) {
border-left: 2px solid var(--list-ul-block-color);
}
ul > li:not(.task-list-item):hover {
border-color: var(--list-ul-hover);
}
ol {
padding-inline-start: 1em;
margin-left: 25px;
list-style: decimal;
}
ol ol {
list-style: lower-latin;
}
ol ol ol,
ol ul ol {
list-style: lower-roman;
}
ol ol ol ol,
ol ol ul ol,
ol ul ol ol {
list-style: decimal;
}
ol > li {
margin-left: -5px;
padding-left: 6px;
border-radius: 5px;
margin-bottom: 6px;
margin-top: 4px;
padding-right: 6px;
transition: all 300ms ease-in-out;
}
.theme-dark ol > li {
border-left: 2px solid var(--list-ol-block-color);
}
.theme-light ol > li {
border-left: 2px solid var(--list-ol-block-color);
}
ol > li:hover {
border-color: var(--list-ol-hover);
}
ol > li::marker {
font-weight: bold;
color: var(--list-ol-number-color);
white-space: pre;
}
ul li, ol li {
font-size: var(--font-size-list);
}
/* list collaspe icon */
/* .markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon {
margin-top: 0px;
transition: transform 20ms linear 0s;
} */
/* .markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon::before {
content : "↓";
font-size: 14px;
margin-left: -11px;
font-weight: bold;
color: var(--text-accent);
transition: transform 10ms linear 0s;
} */
.markdown-preview-view .list-collapse-indicator.collapse-indicator.collapse-icon svg {
/* display: none; */
color: var(--accent-strong);
height: 10px;
width: 10px;
}
/* .markdown-preview-view li.is-collapsed div.list-collapse-indicator.collapse-indicator.collapse-icon {
transform: translateX(0px) translateY(-4px) rotate(-90deg);
opacity: 0.5;
} */
.markdown-rendered .list-collapse-indicator {
margin-left: -55px;
padding-right: 2em;
}
忘了跟你说, 这个只在阅读模式生效,不然你可以把最开始那张图的主题给我,我来抠试试
有序列表。太丑了。O(∩_∩)O哈哈~不用了,我现在也是这种效果。不太行
那就暂时没办法了, 因为阅读模式和编辑模式的实现不太一样,我也不知道怎么修改;
如果你有遇到能实现这个效果的主题可以踢我一下,正好我也想抄一个来玩玩
另外我发的这个片段导出PDF也是这个效果;
是的,导出PDF,效果是完美的。感谢。