修复 code styler 的一些bug

damifan · 2026 年9 月 27 日 06:40

如图可以看到如下问题：

行号和本行代码没有对齐（编辑模式下）。
行号背景会比右侧代码块凸出。
编辑模式左下角没有圆角（阅读模式有的）。

超级强的Gemini3.8flash找到了原因：以1 2 为例：

其实代码没有对齐是因为左侧代码行号的行号和字号与右侧代码块不同导致的。

CSS 单行文本距离顶部的半行距基线公式为：

$$
\text{Baseline Offset} = \frac{\text{line-height} - (A + D)}{2} + A
$$

据下表所示，修改器那左右的基线是不一样的。

修改后编辑模式效果：
完美

damifan · 2026 年9 月 27 日 06:42

代码修复实现

修复文件：.obsidian\plugins\code-styler\styles.css

修改点 1：规范代码块文字尺寸与末行圆角

引用代码：[styles.css#L113-L137]

.code-styler .markdown-source-view [class*=code-styler-line].HyperMD-codeblock-end {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
/* 修复编辑模式末行行号 gutter 底角未设置圆角导致左下角背景溢出突出的问题 */
.code-styler .markdown-source-view [class*=code-styler-line].HyperMD-codeblock-end .code-styler-line-number {
  border-bottom-left-radius: var(--border-radius) !important;
}
body.code-styler .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container-hidden + [class*=code-styler-line].HyperMD-codeblock-begin {
  border-top-left-radius: var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
}
body.code-styler .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container-hidden + [class*=code-styler-line].HyperMD-codeblock-begin .code-styler-line-number {
  border-top-left-radius: var(--border-radius) !important;
}
.code-styler .markdown-source-view .HyperMD-codeblock[class*=code-styler-line] {
  overflow: hidden;
  padding: 0 !important;
  padding-left: var(--size-4-4) !important;
  background: linear-gradient(90deg, var(--gradient-background-colour) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
  /* 统一编辑模式下代码行的字体大小、行高与等宽字体，保持与阅读模式（pre code）及 gutter 行号完全一致 */
  font-family: var(--font-monospace) !important;
  font-size: var(--code-size) !important;
  line-height: var(--line-height-normal) !important;
}

修改点 2：重构编辑模式行号定位、盒模型与基线继承

引用代码：[styles.css#L325-L367]

pre.code-styler-pre div > [class*=code-styler-line-number] {
  width: var(--line-number-gutter-width);
  min-width: var(--line-number-gutter-min-width);
  padding-right: 8px;
  padding-left: calc(4px + var(--language-border-width));
  background-color: var(--code-styler-gutter-background-colour);
  color: var(--code-styler-gutter-text-colour);
  font-family: var(--font-monospace);
  font-size: var(--code-size);
  text-align: right;
  user-select: none;
}
/* 编辑模式下行号继承代码行的字体、大小和行高，确保基线对齐 */
.markdown-source-view div[class*=HyperMD-codeblock] > [class*=code-styler-line-number] {
  width: var(--line-number-gutter-width);
  min-width: var(--line-number-gutter-min-width);
  padding-right: 8px;
  padding-left: calc(4px + var(--language-border-width));
  background-color: var(--code-styler-gutter-background-colour);
  color: var(--code-styler-gutter-text-colour);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: right;
  user-select: none;
}
.markdown-source-view [class*=HyperMD-codeblock] > .code-styler-line-number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  min-width: calc(var(--line-number-gutter-min-width) - 12px);
  height: 100%;
  /* 改用 border-box：防止 100% 高度加上内边距导致行号元素超出代码块底部边界 */
  box-sizing: border-box;
  /* 清除硬编码的 2px 偏差（--line-number-height-correction），确保与右侧单行代码在基线上像素级对齐 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: inherit;
  direction: rtl;
  overflow-x: auto;
}