行内代码超出引用块彻底解决！顺带缓解obsidian两套解析器视觉效果不一致

开发讨论
,
1

这是一个困扰我多年的问题：

在引用块（> 语法）内部末尾包含行内代码（`Stopped`、`Running`）时：

  • 行内代码圆角灰色背景块的底部明显超出了引用块浅色背景的下边界。

pebrel-paste-bZ47GI
pebrel-paste-bZ47GI1502×178 25.8 KB

如图所示非常明显。

首先想到的是 code styler 中修改 inline code padding

（这个插件年久失修，bug奇多，我的另一个帖子讲述了如何修复阅读模式下行号和右侧code block错位的问题）

image
image1378×216 15 KB

减小这个确实有帮助，但是还不够整齐。

在Gemini3.8Flash的帮助下，成功修复了问题（这个模型很强！）

具体思路就是要扩展 quote 块上下的 padding，但是注意 CodeMirror 6 是基于行（Line-based DOM）渲染的，每一行文本都是一个单独的 .HyperMD-quote，所以要保持编辑模式下行内距离为0，只有首末行才有padding。

同时我的脚本还一定程度上缓解了一个历史遗留问题，即编辑模式和阅读模式布局不一样的问题，在CSS中设置两种模式padding都是6px，比对发现quote块阅读和编辑模式保持一致了，看起来舒服多了。

image
image794×196 16.2 KB

2

代码放在二楼，欢迎大家讨论

/* ==========================================================================
   优化 Obsidian 行内代码与引用块排版样式
   修复问题：
   1. 行内代码背景过高超出引用块底边
   2. 编辑视图下引用块内部多行之间行距被异常撑大的问题
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、行内代码尺寸与对齐优化（从根源消除背景下沉与溢出）
   -------------------------------------------------------------------------- */
.markdown-rendered :not(pre) > code,
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting) {
  /* 1. 将上下内边距降为极低值（约 1px / 0.02em），使背景色块紧贴文字，不向下凸出 */
  padding-top: 0.02em !important;
  padding-bottom: 0.02em !important;
  /* 保持左右合理的文字留白 */
  padding-left: 0.3em !important;
  padding-right: 0.3em !important;
  /* 2. 微调基线对齐：略微上移（0.08em），补偿中英文等宽字体（如 Maple Mono）Descender 偏大带来的下沉问题 */
  vertical-align: 0.08em !important;
  /* 3. 紧凑行高，避免行内元素撑大外部 line-box */
  line-height: normal !important;
}

/* --------------------------------------------------------------------------
   二、引用块（Blockquote）留白与行距优化
   -------------------------------------------------------------------------- */

/* 1. 阅读视图（Reading View）：作为一个统一容器，整体上下留白，内部段落行距不受影响 */
.markdown-rendered blockquote {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
}

/* 2. 实时预览编辑视图（Live Preview / CodeMirror 6）：
   注意：CodeMirror 6 是基于行（Line-based DOM）渲染的，每一行文本都是一个单独的 .HyperMD-quote。
   必须重置行与行之间的内部 padding 为 0，彻底消除内部多行之间的异常大行距！
*/
.markdown-source-view.mod-cm6 .HyperMD-quote {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. 精准边距增强：利用现代 CSS 选择器，仅对引用的【首行】和【末行】增加外侧安全边距，内部行绝不增加间距 */
/* 仅引用首行：增加顶部留白 */
.markdown-source-view.mod-cm6 .HyperMD-quote:not(.HyperMD-quote + .HyperMD-quote) {
  padding-top: 6px !important;
}

/* 仅引用末行：增加底部留白（利用现代 Chromium / Electron 原生支持的 :has 选择器） */
.markdown-source-view.mod-cm6 .HyperMD-quote:not(:has(+ .HyperMD-quote)) {
  padding-bottom: 6px !important;
}