Slides - A Lightweight Slide Framework

Quick Start

Add two lines to your HTML and call Slides.init():

<head>
  <link rel="stylesheet" href="https://slides.johnsonlee.io/slides.css">
</head>
<body>
  <script src="https://slides.johnsonlee.io/slides.js"></script>
  <script>
    Slides.init({
      title: 'My Presentation',
      chapters: ['cover', 'chapter-1', 'chapter-2'],
      langs: { en: 'EN', zh: '中文' }
    });
  </script>
</body>

Features

Zero Config Reveal.js CSS, JS, and plugins loaded automatically

Multi-Language Built-in i18n with URL-based language toggle

Auto-Layout Smart centering, list stretching, multi-column, and spacing

LaTeX Math MathJax 3 loaded automatically for $...$ and $...$ syntax

Customizable Accent color and Reveal.js options via CSS variables and config

Markdown-Driven Write slides in Markdown, organized as chapter files

Config

Property	Type	Required	Description
`title`	`string`	Yes	Site title for `<title>` tag
`chapters`	`string[]`	Yes	Markdown filenames without `.md`
`langs`	`{ code: label }`	No	Language map, e.g. `{ en: 'EN', zh: '中文' }`
`reveal`	`object`	No	Override Reveal.js init options

Content Structure

Markdown files are loaded from src/{lang}/{chapter}.md:

src/
  en/
    cover.md
    chapter-1.md
    chapter-2.md
  zh/
    cover.md
    chapter-1.md
    chapter-2.md

Images & i18n

The framework only rewrites paths for chapter markdown files. Image paths inside markdown are not rewritten.

For language-neutral images, use a shared assets/ directory:

![RGB Cube](assets/RGB-color-cube.svg)

For language-specific images (e.g. SVGs with translated labels), put them in src/{lang}/images/ with the same filename. Each language's markdown references its own path:

src/
  en/
    images/
      bubble-sort.svg        <- English labels
    chapter-3.md             <- ![...](src/en/images/bubble-sort.svg)
  zh/
    images/
      bubble-sort.svg        <- Chinese labels
    chapter-3.md             <- ![...](src/zh/images/bubble-sort.svg)

CSS Customization

Override the accent color with CSS custom properties:

:root {
  --slides-accent: #e7ad52;
  --slides-accent-rgb: 231, 173, 82;
}

Auto-Layout

The JS engine inspects each slide after Markdown rendering and applies the best layout automatically:

1. Centered

Chapter Title

A short tagline here

Heading + at most one line, no list/table/image. Auto or via .

2. Heading + Short List

Heading

Single list with ≤ 8 items stretches to fill space, items evenly spaced.

3. Heading + Long List

Heading

Lists with > 8 items auto-split into ceil(N/8) columns.

4. Heading + Table

Heading

Name	Year	Notes
Paper A	2020	Key finding...
Paper B	2021	Key finding...
Paper C	2022	Key finding...

Table fills available width below the heading.

5. Heading + Image

Heading

image

Image centered in remaining space below the heading.

6. Multi-Block

Heading

Multiple content blocks get automatic vertical spacing.

LaTeX Support

Inline math with $...$ or $...$:

The loss function is $L = -\sum p(x) \log q(x)$.