blob: b2c936b7f965d3c3066ad9a5de23c4a657d45295 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
# Academic Marp (acarp) Theme
<img src="acarp.png" width="120" markdown="1">
A minimal theme for Marp presentations designed for academic content.
Has a CSS grid (2 columns) for easily showing text alongside figures.
Two aspect ratios: 16:9 (standard) and 4:3 (beamer style).
## Quick Start
### Install
```bash
npm install
```
### Build Examples
```bash
# Using just (recommended)
just demo # Build both demo presentations
just build slides.md # or use `just pdf slides.md` (requires chrome/chromium)
# Using npx directly
npx marp --config .marprc.json --html demo-standard.md
npx marp --config .marprc.json --html demo-beamer.md
# Export to PDF
npx marp --config .marprc.json --pdf demo-standard.md
```
## Example Slide
<img src="egslide.png" width="500" markdown="1">
*See the "Full Slide Example" in demo-standard.md for the source code.*
## Available Layouts
### `title` - Cover Slide
```markdown
---
<!-- _class: title -->
# Presentation Title
## Subtitle or Author
```
### `layout-2col` - Two Columns
```markdown
---
<!-- _class: layout-2col -->
### Slide Title
<div class="left-column">
Text content
</div>
<div class="right-column">
</div>
```
### `cite` - Citation/Attribution
```markdown
---
### Slide Title
Your content here
<div class="cite">[Author et al., Year]</div>
```
### Default - Single Column
```markdown
---
### Slide Title
Your content here
```
## Common Patterns
### Code + Output
```markdown
---
<!-- _class: layout-2col -->
### Python Example
<div class="left-column">
```python
def hello(name):
return f"Hello {name}"
```
</div>
<div class="right-column">
```
>>> hello("World")
'Hello World'
```
</div>
```
## Themes
## Customization
### Theme Variables
Edit `acarp.css` to modify colors, fonts, spacing:
```css
:root {
--slide-width: 1280px;
--slide-height: 720px;
--padding: 70px;
--color-background: #fdfcff;
--color-foreground: #202228;
--color-highlight: #009dd5;
}
```
For beamer-specific overrides, edit `acarp-beamer.css`.
### Font Size Customization
You can override font sizes in your markdown frontmatter:
```yaml
---
marp: true
theme: acarp
style: |
section {
font-size: 32px !important; /* Larger base font */
}
h1 { font-size: 2.5em !important; } /* Larger headings */
---
```
### Logo Placement
Add a logo to the top-right corner using CSS variables in your frontmatter:
```yaml
---
marp: true
theme: acarp
style: |
:root {
--logo-image: url('logo.png');
--logo-width: 120px;
--logo-height: 50px;
--logo-top: 20px;
--logo-right: 20px;
--logo-opacity: 0.8;
}
---
```
**Logo Variables:**
- `--logo-image`: Path to your logo file
- `--logo-width`: Logo width (default: 100px)
- `--logo-height`: Logo height (default: 40px)
- `--logo-top`: Distance from top (default: 20px)
- `--logo-right`: Distance from right (default: 20px)
- `--logo-opacity`: Transparency (0-1, default: 0.7)
The logo appears on all slides except the title slide.
## Using in Another Project
Copy these files:
- `acarp.css` & `acarp-beamer.css` (themes)
- `.marprc.json` (config)
Then:
```bash
npm install -g @marp-team/marp-cli
marp --config .marprc.json your-file.md
```
Or clone this repo and `just new my-talk`
## All Commands
```bash
just build <file> # Build HTML
just watch <file> # Watch and auto-rebuild
just pdf <file> # Export to PDF
just new <name> # Create new presentation
just clean # Remove output files
just cleanup # Clean everything including node_modules
just demo # Build demo presentations
just help # Show all commands
```
## Notes
- Images: ``
- Math: `$$...$$` for display, `$...$` for inline
- Code blocks: Use ` ``` ` (automatic syntax highlighting)
- PDF/PPTX export requires Chrome or Chromium
|
