通过CSS偏方解决编辑模式下的行距问题

用Obsidian以来最大的问题就是编辑模式下的行间距非常的不舒服,尤其是遇到代码块的时候。

我后来也去看了看页面元素,发现问题其实是代码块没有包裹起来,一个代码块其实是分成三个部份的,中间的代码,以及上下显示```的地方。希望官方能够尽早解决这个问题。

然后我的办法就是通过给最上面的那块向下位移10px 在用padding-top补偿10px回来,这样视觉上是没有问题了,看这个效果还是可以的,已经很接近预览模式的效果了。

代价也有 但是我感觉影响不大,就是代码块的语言选择不太能看见了,也不是不能用,这样起码和阅读模式的样子差不多,和Typora的样式也差不多,下面是我现在在用的css snippets,大家可以针对参数再详细改一改,达到更好的效果。

下面放出我自己用的css snippets

.mod-cm6 .cm-editor .HyperMD-header-1 {
    padding-bottom: 40px;
}

.mod-cm6 .cm-editor .HyperMD-header-2 {
    padding-top: 10px;
    padding-bottom: 20px;
}

.mod-cm6 .cm-editor .HyperMD-header-3 {
    padding-top: 0.5em;
    padding-bottom: 35px;
}

.mod-cm6 .cm-editor .HyperMD-header-4 {
    padding-top: 0.5em;
}

.mod-cm6 .cm-editor .HyperMD-header-5 {
    padding-top: 0.5em;
}

.mod-cm6 .cm-editor .HyperMD-header-6 {
    padding-top: 0.5em;
}

.mod-cm6 .cm-editor .HyperMD-codeblock-begin-bg {
    transform: translateY(20px);
    padding-top: 20px;
}

.mod-cm6 .cm-editor .cm-line {
    line-height: 1.4rem;
}

我还加入了123456级标题的间距修改,以及空行的行距修改,都可以自定义

新用户只能发一张图片 那我就放效果图了

1 个赞

其实后来发现粗暴添加空格 在预览模式下会被省略 笑死 就当折腾了