我在用 border 主题配合 style settings 插件使用。原主题的标题左侧的指示器,是统一开关的,我想要每个层级标题单独开关,就自己简单改了一下。
但是我这样改完以后,在编辑模式下,标题没法单独跟随指示器的出现而缩进了。如图,关掉指示器后,标题并没有跟着去掉缩进。编辑模式下却是可以的。
如果直接删掉缩进这段,标题文字跟指示器就挤在一起了,也不好。
代码放在下面了(注释是 gpt 加的),请大佬帮忙看看要怎么修改?
(h2 类名为 .h2-indicator-on,h3 类名为 .h3-indicator-on,依此类推)
/* 1. 设置基础样式,默认没有缩进 */
.markdown-rendered>:is(h1, h2, h3, h4, h5, h6),
.markdown-preview-sizer>div>:is(h1, h2, h3, h4, h5, h6) {
position: relative;
text-indent: 0; /* 默认无缩进 */
}
/* 2. 仅当存在 -indicator-on 类时,添加缩进 */
[class*="-indicator-on"] .markdown-rendered>:is(h1, h2, h3, h4, h5, h6),
[class*="-indicator-on"] .markdown-preview-sizer>div>:is(h1, h2, h3, h4, h5, h6) {
text-indent: 9px; /* 有指示符时缩进 */
}
/* 3. 伪元素样式 */
.h1-indicator-on .markdown-rendered>h1::before,
.h1-indicator-on .markdown-preview-sizer>div>h1::before {
margin-right: 6px;
content: " ";
display: inline-block;
width: 3px;
height: calc(1.2em - 8px);
border-radius: var(--radius-m);
background-color: var(--h1-accent-color);
position: absolute;
top: 4px;
left: 0px;
}
/* 插件设置项:*/
/* @settings
name: Editor
id: Editor
settings:
-
id: Headings
title: Headings
title.zh: 标题
type: heading
collapsed: true
level: 3
-
id: Indicators
title: Indicators
title.zh: 标题左侧指示器
type: heading
collapsed: true
level: 4
-
id: h1-indicator-on
title: Enable headings indicator
title.zh: 启用 H1 指示器
type: class-toggle
default: true
...依此类推
-
id: h6-indicator-on
title: Enable headings indicator
title.zh: 启用 H6 指示器
type: class-toggle
default: true
*/
二编:把缩进拆开写就好了……每个标题都得单独写