现象

本地预览时，代码块能高亮，但：

  1. 背景偏灰，和全站纸色不搭
  2. 外层还有一层默认底色，像套了两层
  3. 移动端横向滚动时边缘很怪

定位过程

  1. 先确认 Shiki 是否工作：有 token 颜色 → 生成阶段正常
  2. 再查是否重复包了 pre 容器：Astro 默认 markdown 样式还在
  3. 最后对比全局 CSS：发现我只改了 token，没覆盖默认 pre 背景

最终方案

  • 构建侧指定 Shiki 主题
  • 样式侧强制代码块背景使用站点深色变量
  • 给 pre 补齐圆角、边框、滚动，避免「双层盒子」
.prose pre {
  background: var(--code-bg) !important;
  border-radius: 10px;
  border: 1px solid rgb(26 31 46 / 0.2);
}

经验

主题名选对，不等于页面观感就对。
生成器主题和站点视觉 token要一起对齐，否则很容易出现「有颜色但不对」。