174 lines
2.7 KiB
Markdown
174 lines
2.7 KiB
Markdown
---
|
||
categories:
|
||
- "[[Marp]]"
|
||
tags:
|
||
- marp
|
||
- theme
|
||
- css
|
||
- styling
|
||
created: 2026-04-07
|
||
source: "[[marp-guide]]"
|
||
type: reference
|
||
aliases:
|
||
- Marp 主题
|
||
- Marp 样式
|
||
---
|
||
|
||
# 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
|
||
|
||
```
|
||
|
||
## 来源
|
||
|
||
- [[marp-guide]] — 原始资料
|
||
- [[Marp]] — Marp 概念页
|
||
- [[Marp 指令语法]] — 指令参考
|