.1602452971339523:1fd738d0776293b7b4f15a29567f732f_69eca58f07e58165d706b0cb.69ecb18596939c95cd758f77.69ecb184e106f08a795a787e:Trae CN.T(2026/4/25 20:20:21)

[666yuhan666]

新增功能

为 github-markdown-css 添加可配置的 Compact（紧凑）阅读模式，适合小屏幕设备或需要展示更多内容的场景。

实现方式

1. CSS 变量定义

在 .markdown-body 根部定义 5 个间距变量，默认值与原样式保持一致（向后兼容）：

变量	默认值	用途
--spacing-heading-top	24px	标题上边距
--spacing-heading-bottom	16px	标题下边距
--spacing-paragraph-bottom	10px	段落下边距
--spacing-block-bottom	16px	块级元素下边距
--spacing-list-padding	2em	列表缩进

2. .compact 类

通过 .markdown-body.compact 类覆盖变量为更小的值：

.markdown-body.compact {
  --spacing-heading-top: 16px;
  --spacing-heading-bottom: 8px;
  --spacing-paragraph-bottom: 6px;
  --spacing-block-bottom: 8px;
  --spacing-list-padding: 1.5em;
}

3. 变量替换

将 CSS 中硬编码的间距值替换为变量引用，确保：

• 不添加 .compact 类时，样式与之前完全一致
• 添加 .compact 类时，应用紧凑间距

使用方式

方式 1：使用 Compact 类

<article class="markdown-body compact">
  <h1>内容</h1>
</article>

方式 2：自定义间距（更灵活）

.markdown-body {
  --spacing-heading-top: 18px;
  --spacing-paragraph-bottom: 8px;
}

修改文件

文件	改动
github-markdown.css	添加变量定义、.compact 类、替换硬编码间距
readme.md	新增 "Compact Mode" 使用说明章节
test-compact-mode.html	新增交互式演示页面（对比模式 + 单模式预览）

兼容性

• ✅ 向后兼容：不使用 .compact 类时，样式完全不变
• ✅ 可扩展：用户可以通过 CSS 变量自定义任意间距值
• ✅ 文档完整：readme.md 包含详细使用说明和变量对照表