Token shorthand for RevealJS slideshows generated by litoria. Replaces common HTML/CSS patterns with concise {token} syntax in Markdown slide files.

Convention: token name = CSS class name. If a class exists in tokens.css, the token works.

Open the live token preview to see all tokens rendered as actual RevealJS slides.

CSS Files

File Purpose

templates/slideshow/css/slides.css

Base RevealJS theme overrides (fonts, headings, tables)

templates/slideshow/css/tokens.css

All token CSS classes + complex layout classes

Templates

File Purpose

templates/slideshow/slides.md

Simple template without tokens

templates/slideshow/slides-tokens.md

Template demonstrating token syntax

Token Reference

Inline Tokens

Wrap text in a styled <span>. Use inline within any content.

Token Produces Visual

{blue}text\{/blue}

<span class="blue">text</span>

Bold, Quarkus blue (#4695EB)

{green}text\{/green}

<span class="green">text</span>

Bold, Spring green (#6DB33F)

{teal}text\{/teal}

<span class="teal">text</span>

Bold, teal (#009596)

{orange}text\{/orange}

<span class="orange">text</span>

Bold, orange (#D4874D)

{red}text\{/red}

<span class="red">text</span>

Bold, red (#EE0000)

{highlight}text\{/highlight}

<span class="highlight">text</span>

Bold, dark (#1a1a2e)

{dimmed}text\{/dimmed}

<span class="dimmed">text</span>

Muted gray (#8c8c8c)

{pass}text\{/pass}

<span class="pass">text</span>

Bold, green badge (#3E8635)

{fail}text\{/fail}

<span class="fail">text</span>

Bold, red badge (#EE0000)

{best}text\{/best}

<span class="best">text</span>

Bold, teal badge (#009596)

Block Tokens

Used on their own line. Produce block-level elements.

Token Produces Visual

{brand-bar}

<div class="brand-bar"></div>

Blue-teal gradient bar (3px)

{subtitle}text\{/subtitle}

<p class="subtitle">text</p>

Slide subtitle (0.75em, gray)

{supertitle}text\{/supertitle}

<p class="supertitle">text</p>

Category label (0.5em, uppercase, spaced)

{footer}text\{/footer}

<p class="footer">text</p>

Centered small text (0.6em, gray)

Callout Tokens

Block-level boxes with colored borders and backgrounds.

Token Produces Visual

{callout}text\{/callout}

<div class="callout">text</div>

Gray border, neutral background

{callout-red}text\{/callout-red}

<div class="callout red-callout">text</div>

Red border, red-tinted background

{callout-teal}text\{/callout-teal}

<div class="callout teal-callout">text</div>

Teal border, teal-tinted background

{callout-orange}text\{/callout-orange}

<div class="callout orange-callout">text</div>

Orange border, orange-tinted background

Flow Tokens

Used inside a <div class="flow"> container for step diagrams.

Token Produces Visual

{flow-step}text\{/flow-step}

<span class="flow-step">text</span>

Rounded pill with border

{flow-arrow}

<span class="flow-arrow">→</span>

Gray arrow between steps

Image Token

Embed images with size and position control.

Token Produces

\{img src="image/logo.png"}

<img src="image/logo.png">

\{img src="image/logo.png" width="200"}

<img src="image/logo.png" style="max-width: 200px;">

\{img src="image/logo.png" width="80%" center}

<div style="text-align: center;"><img …​ style="max-width: 80%;"></div>

\{img src="https://example.com/pic.jpg" width="300" right}

<div style="text-align: right;"><img …​ style="max-width: 300px;"></div>

Parameters:

  • src (required) — local path or URL

  • width — pixels (200) or percentage (80%)

  • alt — alt text (alt="My caption")

  • center / right / left — horizontal alignment (default: left)

  • rounded — adds border-radius: 8px

Examples:

{img src="image/Quarkus.png" width="85%" center rounded}
{img src="image/photo.jpg" width="300" alt="Team photo"}
{img src="https://cdn.example.com/logo.svg" width="120"}

Video Token

Embed video with RevealJS media attributes.

Token Produces

\{video src="image/demo.mp4"}

<video data-autoplay src="image/demo.mp4"></video>

\{video src="image/demo.mp4" controls}

<video controls src="image/demo.mp4"></video>

\{video src="image/demo.mp4" controls width="90%"}

<video controls src="…​" style="max-width: 90%;"></video>

\{video src="image/demo.mp4" controls center rounded}

<div style="text-align: center;"><video controls src="…​" style="border-radius: 8px;"></video></div>

Parameters:

  • src (required) — local path or URL

  • controls — show playback controls (without this, RevealJS uses data-autoplay)

  • autoplay — auto-play when slide is shown (adds data-autoplay)

  • loop — loop the video

  • muted — start muted

  • width — pixels (480) or percentage (90%)

  • center / right / left — horizontal alignment (default: left)

  • rounded — adds border-radius: 8px

  • preload — preload strategy: auto, metadata, none (default: auto)

  • type — MIME type override, e.g. type="video/webm" (default: inferred from extension)

RevealJS behavior:

  • data-autoplay makes the video play automatically when the slide is shown and pause when navigating away

  • Without controls or autoplay, RevealJS adds data-autoplay by default

  • Background videos use a different mechanism (slide-level data-background-video attribute) — not covered by this token

Examples:

{video src="image/migrate-sb-to-quarkus-ibm-bob.mp4" controls width="90%" center rounded}
{video src="image/demo.mp4" autoplay loop muted width="100%"}
{video src="https://cdn.example.com/intro.webm" controls center}

Token Resolution Order

  1. Frontmatter placeholders resolved first: {author}, {title}, {date}, {email}

  2. Media tokens resolved: \{img …​}, \{video …​}

  3. Paired tokens resolved: {xxx}text\{/xxx} → CSS class wrappers

  4. Self-closing tokens resolved: {xxx} alone (no closing tag, no frontmatter match) → block element

Collision safety: frontmatter keys are semantic (author, date) while CSS classes are visual (green, highlight). No practical overlap.

Complex Layouts (remain as HTML)

These patterns have multi-child structure that cannot be expressed as tokens.

Pattern Element Why HTML

Grid layouts

<div class="two-col">, <div class="three-col">

Children need structure

Cards

<div class="card">, .card.spring, .card.ibm, etc.

Rich content: headings, paragraphs, lists

Stat rows

<div class="stat-row"> → stat > number + label

Nested structure

Person bios

<div class="person"> → person-icon + person-info

Image + structured info

Legend

<div class="legend"> + legend-dot

Multiple colored dots

Colored flows

<span class="flow-step" style="border-color: …​">

Per-step styling overrides

Tables

<table> with styled cells

Standard HTML

Example: Before and After

Before (raw HTML):

<div class="brand-bar"></div>
<p class="dimmed" style="font-size: 0.5em; text-transform: uppercase;
   letter-spacing: 2px;">Tech Sales Enablement</p>

# AI-Powered<br><span class="green">Spring Boot</span>
to <span class="blue">Quarkus</span><br>Migration

<p style="font-size: 0.75em; color: #666;">From weeks of manual work to minutes</p>

After (tokens):

{brand-bar}
{supertitle}Tech Sales Enablement{/supertitle}

# AI-Powered<br>{green}Spring Boot{/green}
to {blue}Quarkus{/blue}<br>Migration

{subtitle}From weeks of manual work to minutes{/subtitle}

Both produce identical rendered output.