企业官网建设流程全解析

• 前端
• 设计系统

活动行高亮是 Minimal 主题在 Obsidian **编辑模式（Edit mode）**下的一项专注辅助功能：它用一层柔和背景标记光标当前所在的行，让长文写作时视线不再“漂移”。本指南以 Minimal 官方特性文档 为骨架，结合仓库内 源码实现 与 Style Settings 配置声明，完整讲解如何开启、调色、理解其视觉分层机制，以及行号为什么位于标签页左边缘。

功能概述：为什么需要活动行高亮

在 Obsidian 的 Live Preview 编辑器中，内容区往往没有类似 Word 的“当前行指示器”。当笔记很长、段落很多时，用户很难快速定位光标究竟落在哪一行。Minimal 的Active line highlighting功能通过为当前行添加背景色，提供即时的视觉锚点。

该功能的核心特征：

• 仅在Edit mode（编辑模式）下生效，不影响阅读模式（Preview mode）的排版；
• 通过社区插件 Style Settings 一键开关；
• 高亮背景色可以独立调节，并已按浅色/深色主题分别预设；
• 与文本高亮、文本选中、搜索命中高亮互不冲突，可以安全叠加。

开启方式：借助 Style Settings 插件

Minimal 默认不开启活动行高亮。官方文档明确指出，该特性需要通过 Style Settings 插件启用，具体步骤如下：

1. 在 Obsidian 中安装社区插件Style Settings（插件 ID：obsidian-style-settings）；
2. 打开设置 → Style Settings，展开Minimal → Line numbers分组；
3. 打开Highlight active line开关（内部标识active-line-on，默认关闭）；
4. 返回编辑区，光标所在行即出现浅色背景。

这一开关在仓库的 Style Settings 声明中对应如下定义（见 src/css/style-settings.css）：

id: active-line title: Line numbers type: heading level: 2 id: active-line-on title: Highlight active line description: Adds a background to current line in editor type: class-toggle default: false

其中的关键信息是type: class-toggle与default: false：该开关并非直接改某个变量，而是向body元素添加active-line-on类来触发整套 CSS 规则，这也是 Minimal 把大量特性做成“可插拔类”的通用机制。

视觉分层：活动行、高亮、选中与搜索互不干扰

官方文档特别强调了一个设计要点：Minimal 区分活动行（active line）、高亮文本（highlighted text）、选中文本（selected text）和搜索词（search terms），并允许这些视觉提示叠加在同一条文本上。

这四种视觉状态在语义上完全不同：

由于活动行背景使用极低透明度的色值（详见下文“默认色值”），即使行内同时存在高亮、选区或搜索命中，后者的颜色仍然清晰可辨。这正是文档建议“背景色使用低透明度颜色以避免与其他高亮冲突”的原因——该建议也直接写在了 Style Settings 的active-line-bg设置描述中（见 src/css/style-settings.css）：

id: active-line-bg title: Active line background description: Using a low opacity color is recommended to avoid conflicting with highlights type: variable-themed-color opacity: true

调节背景颜色：--active-line-bg变量

活动行背景由 CSS 变量--active-line-bg统一驱动，你可以在 Style Settings 的Minimal → Line numbers → Active line background中直接调色（支持透明度，opacity: true）。

仓库为不同主题预设了不同的默认值（见 src/scss/variables/theme.scss）：

注意minimal-dark-black变体（“True Black” 纯黑背景）会覆盖深色主题的默认值，把活动行背景提亮到 8.5% 白色——这从侧面印证了：背景越接近纯黑，活动行高亮就越需要更高的对比度。如果你自定义了其他深色变体，也应按此原则调整。

源码剖析：活动行高亮到底如何绘制

活动行高亮的全部样式逻辑只有一份 SCSS 文件——src/scss/features/active-line.scss，它经由 src/scss/index.scss 的@use 'features/active-line';编译进主题。完整代码如下：

/* Active line highlight */ .active-line-on .workspace-leaf-content[data-type=markdown] { .cm-line.cm-active, .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote.cm-active { background-color:var(--active-line-bg); box-shadow:-25vw 0px var(--active-line-bg), 25vw 0 var(--active-line-bg); } }

拆解其中的实现要点：

1. 类开关约束：所有规则挂在.active-line-on下，只有当 Style Settings 打开开关（给body添加该类）时才生效，不产生任何默认开销；
2. 作用域限定：外层选择器workspace-leaf-content[data-type=markdown]把效果严格限制在 Markdown 编辑区，Canvas、PDF 等视图不受影响；
3. 两条活动行规则：普通文本行.cm-line.cm-active与引用块行.HyperMD-quote.cm-active（Live Preview 模式下引用被解析为HyperMD-quote行）分别处理，保证引用块内的活动行同样有背景；
4. 铺满宽度的 box-shadow 技巧：核心细节在box-shadow: -25vw 0px var(--active-line-bg), 25vw 0 var(--active-line-bg)——它向左右各延伸25vw（视口宽度的 25%）的阴影，用同一颜色把高亮背景扩展到整个编辑区宽度。由于25vw远超内容区宽度，即便行文本很窄，背景也能覆盖到行号与边缘，视觉上“整行”成立。

编译后的成品 CSS 可在 src/css/main.css 查看，与 SCSS 源一一对应。

行号位置：为什么在标签页左边缘

官方文档指出：自Minimal 5.2 版本起，主题在 Live Preview 中支持 Block width（块宽度） 控制，表格、图片 等块元素可以扩展到全宽。正因如此，行号列（gutter）被放置在标签页的左边缘，而不是紧贴正文：

• 块宽度控制依赖“Readable line length（可读行宽）”开启（见 Block width）；
• 行号必须固定在视口左缘，才能与可能扩到全宽的块元素共存，否则宽表格/图片会把行号挤走或覆盖。

从 src/scss/app/editor.scss 可以看到 gutter 的实现方式——.cm-gutters使用position:absolute绝对定位到编辑区左侧，并为其填充背景色--gutter-background、最小宽度var(--folding-offset)。配合打开活动行高亮，光标所在行的背景与行号形成连贯的“当前行指示带”，帮助视线在行号与正文之间快速对齐：

行号与活动行的配套设置

Style Settings 的Minimal → Line numbers分组（见 src/css/style-settings.css）除了活动行开关与背景色，还包含一组与行号视觉直接相关的配套项：

行号颜色的底层默认值定义在 src/scss/app/editor.scss：

body { --line-number-color: var(--text-faint); --line-number-color-active: var(--text-muted); }

即：普通行号使用弱化的--text-faint，光标所在行的行号自动使用更醒目的--text-muted；对应的激活状态选择器见 src/scss/app/editor.scss 与 L86-L88。所以即使不开启整行背景，仅凭行号颜色变化也能感知当前行位置——活动行高亮与“活动行行号加亮”是两套独立但互补的指示机制。

进阶：用 CSS 片段自定义活动行样式

如果你不满足于 Style Settings 提供的选项，还可以借助 CSS snippets 在主题之上叠加自定义规则。例如，将活动行改为左侧描边样式：

/* 活动行左侧加粗指示线，背景改为透明 */ .active-line-on .workspace-leaf-content[data-type=markdown] .cm-line.cm-active { background-color: transparent; box-shadow: inset 3px 0 0 var(--interactive-accent); }

注意自定义片段中的规则在优先级上应高于主题默认规则，必要时可追加!important。由于active-line-on是类名开关，任何片段的生效前提都是先在 Style Settings 中开启“Highlight active line”。

常见问题

Q：为什么开启后阅读模式下看不到高亮？A：这是设计使然。活动行高亮只作用于编辑模式（.cm-line.cm-active是 CodeMirror 6 编辑器内部的行状态类），阅读模式没有“光标所在行”概念。

Q：背景色调得很浓后，为什么选中文本看不清楚了？A：活动行背景会与选区、搜索高亮叠加。官方文档与设置描述都建议使用低透明度颜色，--active-line-bg默认值（3.5%–8.5%）正是为了留出叠加空间。

Q：行号突然消失/被块元素遮住？A：行号 gutter 依赖 Block width 的排版前提。确认 Obsidian 设置中开启了Readable line length（设置 → 编辑器），并用Gutter offset适当增加行号栏宽度（默认 32px，可调 0–60px，见folding-offset）。

总结

活动行高亮是 Minimal “为专注而设计”理念的缩影：以 Style Settings 的一个开关为入口，背后是类名驱动的可插拔 CSS、按主题预设的透明度变量、以及box-shadow铺满宽度的绘制技巧。配合 行号配套设置 与 块宽度 的排版基础，你既可以在长文写作时获得清晰的行级锚点，也能通过 CSS snippets 将其改造成完全符合个人习惯的样式。

• 前端
• 设计系统