请问有什么办法使列表内的文字显示缩进线?


我在列表中插入了文字,并使用了缩进。在编辑模式下左侧会有一条缩进线,但是在预览模式下缩进线就不显示了。

预期的效果

如图所示,在编辑模式下会渲染这个缩进线,我想在预览模式下也保持这个缩进线。

1. 呵呵
    内容段落 1。
    1. 这是什么
        内容段落 2.
    2. 啊啊?
2. 哈哈

ob设置里自带啊,你按对应位置找一下

大佬不行,你用我的测试文本试下看你那可以吗?

这个就是开启的,不太适用

是你用了什么插件或css冲突了吧, 或者是你没找对选项…
这是关闭的效果
image
这是开启的效果
image

首先谢谢大佬这么详细的回复,我目前的效果和你的是一样的。我的需求是让 “1.呵呵”和“内容段落1”之间也渲染这个线,现在这种锁进的非列表的纯文字的段落没有缩进线,想完全连起来!

我就是看他没显示这个缩进线但是文字内容却又缩进显示了,所以看有没有什么CSS样式能让他的缩进线也显示出来! :joy:

这种全都是列表的缩进显示缩进线是没问题的,现在我希望的是非列表的纯文本的内容也显示缩进线

也就是在红色箭头这里,纯文本的内容渲染出来,没有显示缩进线。我希望这个缩进块的内容都有缩进线包裹,请问各位CSS能达到这个效果么?

问题是在你举的这个例子里, "内容段落1"它也不属于"呵呵"的缩进块啊, 它俩明显是同级的缩进. 你得让它缩进去, 缩进线才能显示出来啊…
image
顺便一提, 这个在列表项里键入aaa换行bbb的用法, 本质上其实是软换行shift+enter, 在编辑器眼里它俩其实就是一行的东西, 只不过是给用户折行显示出来了, markdown对软换行的显示支持是很差的, 比如仔细看, 两行的行首aaa和bbb都对不齐, 所以干脆建议就别这么用.

在我这边预览模式下aaa和bbb是能对齐的,是我主题的原因嘛 :joy:。其实我是用的tab换行让bbb缩进去的,tab设置的方式是4空格。

那我还是先这样看着吧,谢谢大佬,就不折腾这个啦,本来也是一个小需求,不是特别强烈哈哈!再次感谢!

我才发现你不是通过软换行来输入aaa\nbbb的, 你是直接在两个列表项之间插入了普通文本, 这个用法markdown也是不怎么支持的, 对普通文本缩进后, 你会发现带了缩进提示线的显示效果还不如不带呢, 而且也仅在编辑模式下bbb前面才有你要的缩进提示线.

image

image

我是在两个列表之间先使用回车换行换下去,然后按tab缩进进去达到这个效果的。我的tab格式设置的为4空格,所以在编辑模式下看起来都是对齐的。

我这么缩进的原因是想把这个列表作为一个小分块的标题使用的,每块标题然后写具体对应的详细内容。如果直接用header的话,那标题就会太多太细了。所以我就这么使用的 ,或者大佬你看有什么更合适的方式吗? :joy:

看了一下你的旧帖子,怪不得你会有这样的问题。

效果展示,为了明显一点这里的线调成了红色:

CSS 代码:

li:has( br) {position: relative;}
li:has( br)::after {
  content: "";
  position: absolute;
  border-left: var(--indentation-guide-width) solid var(--indentation-guide-color);
  bottom: var(--size-2-1);
  left: calc(-1 * var(--font-text-size));
  height: calc(100% - 1.6 * var(--font-text-size));
}

仅限你描述的情况起效,列表项一行太长自动折行的不会起作用。

不过先说好,这个线的位置和高度是我肉眼对齐和调整的,所以不能保证有别的问题。

再次感谢大佬,我用了,基本能满足我的需求!谢谢!因为我平时在列表里缩进用的多,所以好多地方都是这么来控制的。

看效果还不错,基本的块都包裹起来了,这样段落的递进关系会更强嘿嘿! :face_with_peeking_eye:

不过也还有些小问题,像三级标题obsidian也自动渲染了缩进线,和CSS的一叠加就变粗了;三级标题2里面用了callout,然后导致线也没有出来。不过基本场景都满足了,再次感谢大佬!

这种写法是不是过于自由了,我记得这么写 Callout 在预览模式可就是一个黑块啊。

image

好吧,那么首先把两个选择器都改一下:

li:has( br)li

(原 CSS 在 楼上

然后:

/*禁用阅读模式缩进参考线*/
ul::before, ol::before {
  display: none !important;
}

注意:仍然要保持下图这个选项开启!

效果展示:

碎碎念

(实在不建议这种写法)

可能我习惯用这种缩进来表示一些段落的从属关系了 :joy:这种大佬你有什么推荐的方式么?如果是用header的话标题又太细了!

顺便问下大佬请问完整的是改成下面这种吗?改成这种虽然可以callout可以显示线了,但是正常的列表显示的就有问题了。

image

li{position: relative;}
li::after {
  content: "";
  position: absolute;
  border-left: var(--indentation-guide-width) solid var(--indentation-guide-color);
  bottom: var(--size-2-1);
  left: calc(-1 * var(--font-text-size));
  height: calc(100% - 1.6 * var(--font-text-size));
}
ul::before, ol::before {
  display: none !important;
}

我把那个1.6放大到1.9,那个单行也有一小截线的问题消失了,多行的有线也能接受,再次感谢大佬!

这有个人和你情况一样,你可以参考。