Obsidian 用 CSS Snippet 解决编辑器过窄和 Mermaid 图展示不全

前言

在使用 Obsidian 时，很多人会遇到两个让人头疼的排版问题：

1. 部分主题的编辑器内容区域太窄：正文被限制在很窄的一列里，两侧留出大片空白，在宽屏显示器上尤其浪费空间，写长文档或贴代码时体验很差。
2. Mermaid 图展示超出编辑器或者显示不全：当流程图、时序图比较大时，图形会溢出内容区域，或者被裁切，看不到完整内容。

这两个问题大多和主题预设的宽度限制、以及 Mermaid SVG 的尺寸约束有关。好在 Obsidian 提供了 CSS Snippet（代码片段） 机制，不需要改主题源码，写几行 CSS 就能解决。本文记录完整的配置方法。

什么是 CSS Snippet

CSS Snippet 是 Obsidian 内置的自定义样式机制。你可以把自己的 CSS 放进一个 .css 文件，Obsidian 会把它叠加到当前主题之上，从而覆盖主题的默认样式。它的好处是：

• 不修改主题本身，升级主题不会丢失你的自定义；
• 可以随时在设置里开关，方便对比效果；
• 多个 snippet 可以共存、按需启用。

解决方案

下面是核心的 snippet 内容：

body {
  --file-line-width: 65rem !important;
  --line-width: 65rem !important;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

拓宽编辑器内容区域

body {
  --file-line-width: 65rem !important;
  --line-width: 65rem !important;
}

Obsidian 通过 CSS 变量来控制正文的最大宽度：

• --file-line-width：阅读视图（Reading View）/ 实时预览中文件正文的行宽；
• --line-width：编辑器中文本行的宽度。

很多主题会把这两个变量设成一个比较小的值（例如 40rem 左右），导致内容区被压得很窄。我们把它们统一覆盖成 65rem，正文就能撑得更宽。

65rem 只是一个参考值，你可以按自己的屏幕和喜好调整：

• 宽屏想铺满更多，可以调大，例如 80rem 甚至 100rem；
• 觉得太宽看着累，可以调小，例如 55rem。

提示：之所以加 !important，是因为主题本身往往已经定义了这两个变量，权重较高，不加 !important 可能覆盖不掉。

让 Mermaid 图自适应宽度

.mermaid svg {
  max-width: 100%;
  height: auto;
}

Mermaid 渲染出来的是一个 <svg> 元素，默认情况下它会按图形自身的尺寸渲染，遇到大图就会溢出内容区域或者被容器裁切。

这段 CSS 做了两件事：

• max-width: 100%：限制 SVG 最大不超过容器宽度，超出时自动缩放，避免横向溢出；
• height: auto：让高度随宽度等比例变化，保证图形不变形、内容完整。

这样无论图多大，都能完整地塞进编辑器里。

配置步骤

1. 打开 snippets 目录

进入 Obsidian 设置：

设置（Settings）→ 外观（Appearance）→ CSS 代码片段（CSS snippets）

点击右侧的文件夹图标，会自动打开当前库（vault）的 snippets 目录。它的实际路径是：

<你的库>/.obsidian/snippets/

.obsidian 是隐藏目录，如果在文件管理器里找不到，记得开启「显示隐藏文件」。

2. 新建 CSS 文件

在 snippets 目录里新建一个文件，例如 custom-layout.css，把前面的完整 snippet 粘贴进去并保存：

body {
  --file-line-width: 65rem !important;
  --line-width: 65rem !important;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

3. 启用 snippet

回到 设置 → 外观 → CSS 代码片段，点击右上角的刷新图标让 Obsidian 重新扫描目录，然后把刚才新建的 custom-layout 开关打开即可。

启用后无需重启，编辑器宽度会立刻变宽，Mermaid 图也会自适应缩放。之后修改 CSS 文件保存后，效果一般会自动生效；如果没生效，点一下刷新图标或重新开关一次即可。