llm_wiki/wiki/Marp 主题与样式.md

categories, tags, created, source, type, aliases

categories	tags	created	source	type	aliases
Marp	marp theme css styling	2026-04-07	marp-guide	reference	Marp 主题 Marp 样式

Marp 主题与样式

Marp 的内容与样式完全分离——Markdown 管内容，CSS 主题管外观。

三个内置主题

主题	风格	适用场景
default	经典白底、蓝灰色调、左对齐	通用、商务
uncover	极简、居中布局、现代感	技术分享、轻松场合
gaia	彩色、大胆、左对齐	创意、教育

使用方式：

---
marp: "true"
theme: uncover
---

[!tip] 初学建议从 uncover 开始，它对 Markdown 的默认渲染效果最好。

用 style 指令微调

不想写独立 CSS 文件，可以用 style 全局指令内联修改：

---
theme: default
style: |
  section {
    background-color: #f0f0f0;
  }
  h1 {
    color: #0066cc;
    border-bottom: 2px solid #0066cc;
  }
---

[!note] style 指令比 <style> 标签更好——不会在其他 Markdown 编辑器里显示异常。

用 class 指令切换布局

在主题 CSS 中定义不同的 section 类：

section.lead h1 {
  text-align: center;
  font-size: 2.5em;
}

section.dark {
  background-color: #1a1a2e;
  color: #e0e0e0;
}

然后在 Markdown 中使用：

<!-- _class: lead -->

# 居中大标题

---

<!-- _class: dark -->

# 深色页面

自定义主题

在 Obsidian Marp 插件中

1. 在 Templates/MarpTheme/ 目录中放入 CSS 文件

<vault>/
└── Templates/
    └── MarpTheme/
        ├── beamer.css
        └── gradient.css

[!note] Obsidian Marp 插件设置中 Theme Folder Location 应配置为 Templates/MarpTheme。

3. 在 Markdown 中引用：

---
marp: "true"
theme: beamer
---

[!warning] 添加新 CSS 后需要重启 Obsidian。

CSS 主题基本结构

/* @theme my-custom-theme */
@import 'default';

section {
  font-family: 'Noto Sans SC', sans-serif;
  background: #ffffff;
  color: #333333;
}

h1 {
  color: #2c3e50;
  border-left: 4px solid #3498db;
  padding-left: 0.5em;
}

h2 {
  color: #34495e;
}

code {
  background: #ecf0f1;
  padding: 2px 6px;
  border-radius: 3px;
}

@import 'default' 继承内置主题，只覆盖需要改的部分。

背景技巧

纯色背景

<!-- _backgroundColor: #1a1a2e -->
<!-- _color: #e0e0e0 -->

渐变背景

<!-- backgroundImage: linear-gradient(to bottom, #667eea, #764ba2) -->

图片背景

![bg cover](path/to/image.jpg)

来源

• marp-guide — 原始资料
• Marp — Marp 概念页
• Marp 指令语法 — 指令参考