This repository lets you create professional slide presentations by writing plain text. Instead of clicking around in PowerPoint or Google Slides, you write your content in a simple format called Markdown, and the system turns it into a polished slide deck automatically.
This might sound unusual at first, but it has real advantages for communicators:
- Your content and your design are completely separate — change the look of every slide at once by editing one file
- Your presentations live in the same place as your other course files and are version-controlled (you can always go back to an earlier draft)
- Output is generated automatically — push your changes to GitHub and the presentation is built and published for you
Marp is a free, open-source tool that converts Markdown files into slide presentations. Markdown is the same plain-text formatting used in course management systems, GitHub, and many content platforms — if you've ever used **bold** or # Heading in a text editor, you already know the basics.
A Marp slide file looks like this:
---
marp: true
---
# My First Slide
This is the content of slide one.
---
# My Second Slide
- Bullet point one
- Bullet point two
Each --- on its own line creates a new slide. That's really all there is to it.
The easiest way to use this template is through GitHub Codespaces — a full coding environment that runs in your browser. You don't need to install anything on your computer.
- Click the green Use this template button at the top of this page
- Select Create a new repository
- Give your repository a name (e.g.,
comm-4564-presentation) - Leave it set to Public and click Create repository
- In your new repository, click the green Code button
- Click the Codespaces tab
- Click Create codespace on main
- Wait about 60 seconds while the environment loads in your browser
You'll see a VS Code editor open in your browser. This is where you'll write your slides.
In the left sidebar, expand the presentations/ folder and click example.md to open it.
With the Marp for VS Code extension installed automatically in your Codespace, you can see a live slide preview without using the terminal:
- Open any
.mdfile inpresentations/ - Click the preview icon in the top-right corner of the editor (or press
Ctrl+Shift+V) - The preview panel updates automatically every time you save (
Ctrl+S)
The preview renders your slides with the Virginia Tech theme exactly as they will appear when published.
- In the
presentations/folder, right-click and choose New File - Name it something like
my-presentation.md - Copy the front matter block from
example.mdat the top:
---
marp: true
theme: vt
paginate: true
footer: "Your Name · Virginia Tech · Date"
---
Everything after this block is your slide content.
| What you type | What it does |
|---|---|
--- on its own line |
Starts a new slide |
# Heading |
Large slide title |
## Subheading |
Smaller heading |
- Item |
Bullet point |
**bold text** |
Bold |
*italic text* |
Italic |
Add a comment directly above a slide's content to change its style:
<!-- _class: title -->
# Cover Slide Title
## Subtitle
<!-- _class: section -->
# Section Break
Anything inside <!-- --> comment tags won't appear on the slide but will be visible to you in presenter mode:
# My Slide
Content the audience sees.
<!-- Notes only I can see during the presentation. -->
Put images in the assets/ folder at the root of your repository. From any file inside presentations/, reference them with a relative path starting with ../assets/:
marp-template/
├── assets/
│ ├── sample.png ← drop your images here
│ └── my-photo.jpg
└── presentations/
└── example.md ← reference as ../assets/my-photo.jpg
Standard Markdown image syntax places the image within the slide's text area:
You can control the size with HTML attributes:
<img src="../assets/my-photo.jpg" alt="Description" width="400">
Place an image behind the entire slide by adding bg to the alt text:
Marp automatically scales and crops the image to fill the slide. The VT theme hides the maroon top-bar when a full background is used.
Use bg right or bg left to fill half the slide with an image while keeping text on the other half. An optional percentage controls the split:
# Slide Title
Your text content goes here on the left side.
# Slide Title
Your text content goes here on the right side.
Every time you save changes and commit them to GitHub, the presentation is automatically built and published to a public web address. This means you can share a link to your slides without anyone needing to download a file.
Your presentation will be available at:
https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/
To enable this the first time:
- Go to your repository on GitHub
- Click Settings → Pages
- Under Source, select GitHub Actions
- Click Save, then push any change to trigger the first build
marp-template/
├── presentations/ ← Put your .md slide files here
│ └── example.md ← Start here
├── assets/ ← Put your images here
│ └── sample.png ← Example image included with the template
├── themes/
│ └── vt.css ← Virginia Tech color theme (don't edit unless you want to customize)
├── .marprc.yml ← Tells Marp which theme to use by default
├── package.json ← Lists the software this project needs
└── README.md ← This file
You'll spend almost all of your time inside the presentations/ folder.
- Marp documentation: marp.app
- Markdown reference: markdownguide.org/basic-syntax
- GitHub Codespaces guide: docs.github.com/codespaces
If something isn't working, check that:
- Your file is saved (look for a dot next to the filename in the tab)
- The front matter block at the top includes
marp: true - Each slide is separated by
---on its own line with a blank line before and after it