如何自定义 SimpleMDE 预览区域的背景色以匹配编辑器主题

本文详解如何通过 css 覆盖 simplemde 的预览（preview）区域默认白色背景，使其与已设置的深色编辑器背景（如 rgb(0, 17, 28)）保持一致，确保视觉统一性。

本文详解如何通过 css 覆盖 simplemde 的预览（preview）区域默认白色背景，使其与已设置的深色编辑器背景（如 rgb(0, 17, 28)）保持一致，确保视觉统一性。

SimpleMDE 默认将编辑区（基于 CodeMirror）与预览区（HTML 渲染结果）分离渲染，二者使用完全独立的 CSS 类名和样式作用域。因此，即使你已成功为 .CodeMirror 设置深色背景（如下所示），预览模式仍会回退到默认白色背景：

.CodeMirror {
  min-height: 200px;
  width: 100%;
  color: white;
  background-color: rgb(0, 17, 28);
  padding: 15px 25px;
}

要同步预览区域的视觉风格，需针对性地覆盖其容器样式。SimpleMDE 使用两个关键类控制预览视图：

• .editor-preview：用于「分屏预览」（Preview tab 或 split view 下的右侧预览面板）；
• .editor-preview-side：部分版本或主题中用于侧边预览布局（兼容性建议一并设置）。

✅ 正确的覆盖方案如下（请将此 CSS 插入你的样式表，确保优先级高于 SimpleMDE 自带样式，例如置于 <style> 标签末尾或使用 !important 仅在必要时）：

.editor-preview,
.editor-preview-side {
  background-color: rgb(0, 17, 28) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 0 15px 15px;
  box-sizing: border-box;
  overflow: auto;
}

⚠️ 注意事项：

小羊标书

一键生成百页标书，让投标更简单高效

下载

• !important 在此处推荐使用，因 SimpleMDE 内部可能内联或高权重样式覆盖；若项目采用 CSS-in-JS 或模块化方案，请确保该规则生效于全局作用域。
• 预览区文本颜色（color）必须同步调整为浅色（如 #fff），否则深色背景+深色文字将导致内容不可读。
• 若启用「实时预览」（autofocus: true 或 previewRender 配置），该样式同样生效，无需额外处理。
• 如需进一步定制 Markdown 渲染后的 HTML 元素（如 <h1>、<pre>、代码块等），应额外编写针对 .editor-preview 下文的嵌套样式，例如：

  .editor-preview pre,
  .editor-preview code {
    background-color: rgba(0, 30, 50, 0.7);
    color: #e0e0e0;
  }

? 进阶建议：若长期使用深色主题，可直接集成社区维护的 SimpleMDE-DarkTheme 分支，它已系统性重写全部 UI 组件样式，包括预览、工具栏、状态栏等，避免零散样式覆盖带来的维护成本。

最终效果：点击「Preview」按钮后，预览区域将无缝继承编辑器的深色背景与配色体系，实现专业、一致的暗色 Markdown 编辑体验。