Obsidian自定义代码块样式成Typora

先来效果图

修改前效果:

修改后效果:
编辑模式:

预览模式:

两种模式的表现间距略有不同, 但不影响.

添加自定义css样式

.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock {
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: #E7EAED;
}
.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock-begin {
    margin-bottom: 5px !important;
    height: 26px;
    top: 5px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #E7EAED;
}

.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock-end {
    margin-top: 5px !important;
    height: 26px;
    bottom: 5px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #E7EAED;
}

body {
    --code-size: 15px;
}

把上述代码片段放到.obsidian\snippets\page-style.css, 然后在obsidian软件中启用page-style.css

启用css

其它

根据检索的信息和尝试, 发现直接设置margin-*会导致输入时部分行无法聚焦, 虽然使用padding可以修改间距但是如果两个代码段连在一块就会导致两者的边界模糊, 影响观感, 与此相反的是typora的代码块看着就很舒服, 因此使用了一定的技巧最终实现了效果并且不影响输入.

1. 加了代码块边框颜色
2. 加了代码块间距

总体的思路就是既然所有的元素都是相对定位, 那就增加HyperMD-codeblock-begin和HyperMD-codeblock-end的高度, 然后对开始的div HyperMD-codeblock-begin 添加margin-bottom, 对HyperMD-codeblock-end添加margin-top, 测试没问题.

参考

软件Obsidian中如何修改段间距？
Obsidian中自定义编辑模式的段间距