Markdown Authoring Guide

Presentations in slides-tape are authored purely in standard Markdown with powerful extended features.

Slide Anatomy & Frontmatter

Slides are separated by three dashes (---). Each slide can contain its own specific configuration via HTML comments.

<!-- duration: 8s -->
<!-- columns: 2 -->
<!-- highlight-default-dur: 1.5s -->

# My Slide

Available Frontmatter Directives:

  • <!-- duration: <time> -->: Overrides the global autoplay duration for this specific slide.
  • <!-- columns: <n> -->: Switches the slide to a CSS Grid layout with N equal columns.
  • <!-- highlight-default-dur: <time> -->: Modifies the default wait time between code highlight steps.
  • <!-- highlight-default-delay: <time> -->: Modifies the default wait time before a code highlight step begins.

Columns Layout

Use <!-- columns: N --> in the slide frontmatter to activate a CSS Grid layout. Place <!-- col-break --> inside the slide body to explicitly mark where the next column pane begins.

  1. Top-Level Headings: Any # h1 at the very top of the slide is hoisted above the grid, spanning all columns.
  2. Order: Content before the first <!-- col-break --> goes into Column 1, content after fills Column 2, and so on.
  3. Code Blocks: Directives like <!-- col-break --> inside a fenced code block are safely ignored.
<!-- columns: 2 -->

# Two-Pane Demo

## Left Column
Content for the left side.

<!-- col-break -->

## Right Column
```python
print("Content for the right side!")


## Fragments

To stagger the appearance of list items or elements on a single slide, wrap them in `<!-- fragment -->` tags.

```markdown
# Features
<!-- fragment -->
1. Written in Markdown
<!-- fragment -->
2. Terminal recording included

Speaker Notes & Embedded Data

Anything prefixed with > Note: or inside a block starting with Notes: is stripped from the Audience view and exported video. It is exclusively rendered in the Presenter Dashboard’s scrolling notes pane.

> Note: Emphasize the architectural diagram here!

You can also embed pre-recorded Terminal Event files (.tre) directly into a slide without running a live script using the > tre: tag:

> tre: ./demo_recording.tre

Advanced Code Highlight Engine

slides-tape features an intelligent, step-by-step code highlighting engine. When presenting, press H to dim unfocused lines and spotlight specific code segments.

Method A: Internal Markers (Inline)

Append // highlight or // [!code highlight] to the end of a line.

const user = await db.getUser(id);
if (!user) throw new Error("Not found"); // highlight

Method B: External Markers (Sequence)

Define a sequence of line numbers using HTML comments.

<!-- highlight: 2, 4-5 --delay 1s --dur 2s -->
```javascript
const a = 1;
const b = 2; // Step 1: Highlights this line
const c = 3;
const d = 4; // Step 2: Highlights this line and the next
const e = 5;