aboutsummaryrefslogtreecommitdiff

Academic Marp (acarp) Theme

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

npm install

Build Examples

# 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

See the "Full Slide Example" in demo-standard.md for the source code.

Available Layouts

title - Cover Slide

---
<!-- _class: title -->
# Presentation Title
## Subtitle or Author

layout-2col - Two Columns

---
<!-- _class: layout-2col -->
### Slide Title

<div class="left-column">
Text content
</div>

<div class="right-column">
![](figs/image.png)
</div>

cite - Citation/Attribution

---
### Slide Title

Your content here

<div class="cite">[Author et al., Year]</div>

Default - Single Column

---
### Slide Title

Your content here

Common Patterns

Code + Output

---
<!-- _class: layout-2col -->
### Python Example

<div class="left-column">
```python
def hello(name):
    return f"Hello {name}"
>>> hello("World")
'Hello World'
## 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:

---
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:

---
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:

The logo appears on all slides except the title slide.

Using in Another Project

Copy these files:

Then:

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

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