Terminal

A retro-terminal theme for Quarto reveal.js

Eric Nantz

2026-06-19

WELCOME TO THE TERMINAL.

// QUARTO REVEALJS THEME

Slides that look like your favorite shell.

This deck is built with the theme itself — every slide you see is a working example you can copy. Press → to begin.

>intro●00 / 09
01 / 10press → to continue

WHAT YOU GET.

A complete look-and-feel, ready out of the box.

  • Dark, monospace, pixel-glow headings — the classic terminal aesthetic
  • A top status bar and a bottom footer with a live slide counter
  • Progress dots, a CRT scanline overlay, and an amber heading glow
  • Purpose-built layouts for callouts, steps, and cards
  • 13 color schemes — and full SCSS control over everything else
>intro/overview●1.1
02 / 10press → to continue

THE BUILDING BLOCKS.

Everything is plain Markdown plus a few helper spans:

  • [// LABEL]{.kicker} — an uppercase kicker label
  • [subtitle]{.lede} — a larger subtitle line
  • [supporting text]{.desc} — a muted description line
  • [broke]{.neg} is red, [works]{.ok} is green

So a build that was once broken now works.

>layouts/spans●2.1
03 / 10press → to continue

STEP BY STEP.

Wrap an ordered list in ::: steps for numbered boxes.

  1. Install the theme with quarto add rpodcast/quarto-revealjs-terminal
  2. Set format: terminal-revealjs in your front matter
  3. Write Markdown — add helper spans where you want emphasis
  4. Render with quarto render and ship it
>layouts/steps●2.2
04 / 10press → to continue

SIDE BY SIDE.

CALLOUTS Turn any bullet list into bordered callout boxes by wrapping it in a ::: callouts div.

Great for key points and takeaways.

CARDS Place several ::: card divs inside ::: cards for a clean two-column layout.

Use [Title]{.card-title} — not a heading — for the card title.

Tip: never put a Markdown heading (##, ###) inside a card — Quarto turns it into a nested slide and breaks navigation.

>layouts/cards●2.3
05 / 10press → to continue

STATUS BAR & FOOTER.

The chrome is driven by header attributes.

Set these on any ## slide header:

  • terminal-path — the green > prompt path, top-left
  • terminal-status — the status label with a dot, top-right
  • terminal-hint — overrides the footer hint (see the bottom-right of this slide)

Document-level defaults live in the YAML front matter, so you only set what changes per slide.

>chrome/status●ACTIVE
06 / 10set it per slide ↑

CODE & FILE TREES.

Fenced code blocks render in a bordered terminal panel.

~/.config/terminal-theme/
├── _quarto.yml         # project settings
├── custom.scss         # your overrides (palette, colors, fonts)
├── slides.qmd          # this presentation
└── _extensions/
    └── terminal/       # the theme lives here

Inline code is highlighted too — set the accent with $terminal-accent.

>content/code●3.1
07 / 10press → to continue

PICK A COLOR SCHEME.

Switch the whole deck like a modern terminal — one line.

/*-- scss:defaults --*/
$terminal-palette: "solarized-dark";

DARK SCHEMES amber · solarized-dark · dracula · nord · gruvbox-dark · monokai · one-dark · catppuccin-mocha · tomorrow-night-eighties · green-phosphor · cyan-navy

LIGHT SCHEMES solarized-light · gruvbox-light

Light palettes automatically soften the glow and scanlines so text stays readable.

>theme/palettes●3.2
08 / 10press → to continue

MAKE IT YOURS.

// FULL SCSS CONTROL

Start from a palette, then override anything.

$terminal-accent, $terminal-bg, $terminal-heading-font, $terminal-glow, $terminal-scanlines — every color, font, and effect is a variable.

>theme/customize●SECTION 4 / 4
09 / 10press → to continue

START BUILDING.

Three commands and you’re presenting.

  1. quarto use template rpodcast/quarto-revealjs-terminal
  2. Edit the generated .qmd — this file is your reference
  3. quarto render → open the HTML → present

Questions, issues, and contributions are welcome on GitHub.

>quarto-revealjs-terminal●DONE
10 / 10that's all — go build