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

---
categories:
- '[[LLM Wiki]]'
- '[[Marp]]'
tags:
- wiki
- marp
- theme
- css
- styling
created: 2026-04-07
source: '[[marp-guide]]'
type: reference
aliases:
- Marp 主题
- Marp 样式
relations:
- type: part_of
  target: '[[Marp]]'
  description: 同源：marp-guide
  confidence: 3
---

[raw:marp-guide:2]# Marp 主题与样式

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

## 三个内置主题

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

使用方式：

```markdown
---
marp: "true"
theme: uncover
---
```

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

## 用 style 指令微调

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

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

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

## 用 class 指令切换布局

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

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

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

然后在 Markdown 中使用：

```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 中引用：

```markdown
---
marp: "true"
theme: beamer
---
```

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

### CSS 主题基本结构

```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'` 继承内置主题，只覆盖需要改的部分。

## 背景技巧

### 纯色背景

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

### 渐变背景

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

### 图片背景

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

## 来源

---
## 相关页面

详见 [[Marp 主题与样式]]

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

[raw:marp-guide:2]# Marp 主题与样式

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

## 三个内置主题

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

使用方式：

```markdown
---
marp: "true"
theme: uncover
---
```

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

## 用 style 指令微调

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

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

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

## 用 class 指令切换布局

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

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

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

然后在 Markdown 中使用：

```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 中引用：

```markdown
---
marp: "true"
theme: beamer
---
```

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

### CSS 主题基本结构

```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'` 继承内置主题，只覆盖需要改的部分。

## 背景技巧

### 纯色背景

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

### 渐变背景

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

### 图片背景

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

## 来源

---
## 相关页面

详见 [[Marp 主题与样式]]

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