代码块字体问题修复

[KrcsonZhou]

Blue Topaz 主题代码块字体问题修复说明

问题描述

当代码块（```code```）位于有序列表或无序列表的子层级中（即前面有制表符缩进以表示层级关系）时，代码块内的字体会发生变化，显示为普通文本字体而非等宽字体。

问题场景示例：

1. 第一项
   ```javascript
   console.log('Hello World');  // 这里的字体会显示异常

2. 第二项

## 问题根源

在 `theme.css` 文件的第 13252-13253 行，存在以下样式规则：

```css
.markdown-source-view.mod-cm6 .HyperMD-list-line.cm-line {
  font-family: var(--font-family-list);
}

问题分析：

1. 当代码块出现在列表项中时，该代码块行会同时具有两个 CSS 类：

   • .HyperMD-list-line （列表行标识）
   • .HyperMD-codeblock （代码块标识）

2. 由于上述样式规则匹配了所有列表行（包括代码块行），导致代码块继承了列表的字体设置 var(--font-family-list)

3. 这覆盖了代码块本应使用的等宽字体 var(--font-monospace)（定义在第 12580 行）

修复方案

在选择器中添加 :not(.HyperMD-codeblock) 排除条件，避免代码块被应用列表字体样式。

修改前：

.markdown-source-view.mod-cm6 .HyperMD-list-line.cm-line {
  font-family: var(--font-family-list);
}

修改后：

.markdown-source-view.mod-cm6 .HyperMD-list-line.cm-line:not(.HyperMD-codeblock) {
  font-family: var(--font-family-list);
}

修复效果

修复后，列表中的代码块将正确显示等宽字体，不再受列表字体样式的影响。

• ✅ 普通列表项：使用 var(--font-family-list) 字体
• ✅ 列表中的代码块：使用 var(--font-monospace) 等宽字体
• ✅ 独立的代码块：不受影响，继续使用等宽字体

修改位置

• 文件：theme.css
• 行号：第 13252 行
• 修改日期：2025 年 11 月 20 日

兼容性说明

此修复仅针对样式选择器进行优化，不影响其他功能，完全向下兼容。