Zo
Get started
Back to Prompts
๐Ÿ“ฝ๏ธ
๐ŸŽฏ
โœจ

Create web-based presentation with Reveal.js

Creator

Zo

Categories

CreateSiteSlides

Create a web-based presentation using Reveal.js, driven by a markdown file.

Protocol

  1. Create or navigate to site: Either create a new website project using create_website with variant="slides" to get a Reveal.js slideshow template, or navigate to an existing site directory that you want to convert to a slideshow.

  2. Create SLIDES.md: Create the SLIDES file in the site root with initial slide content. Use the content from any referenced files or user instructions to populate the slides. Example structure:

# My Presentation

A sample slideshow powered by Reveal.js

---

## Slide 2

This is the second slide

- Point 1
- Point 2
- Point 3

---

## Code Example

\`\`\`typescript
const greeting = "Hello World";
console.log(greeting);
\`\`\`
  1. Update server.ts: Replace the contents of server.ts with a minimal Reveal.js setup. This serves a single-page Reveal.js presentation that loads slides from SLIDES:
import { serveStatic } from "hono/bun";
import config from "./zosite.json";
import { Hono } from "hono";
import { html } from "hono/html";

type Mode = "development" | "production";
const app = new Hono();

const mode: Mode =
  process.env.NODE_ENV === "production" ? "production" : "development";

/**
 * Add any API routes here.
 */
app.get("/api/hello-zo", (c) => c.json({ msg: "Hello from Zo" }));

// Serve SLIDES.md
app.get("/SLIDES.md", serveStatic({ path: "./SLIDES.md" }));

// Serve Reveal.js presentation at root
app.get("/", (c) => {
  return c.html(
    html`<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>${config.name}</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reset.css" />
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css" />
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/black.css" />
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/monokai.css" />
        </head>
        <body>
          <div class="reveal">
            <div class="slides">
              <section
                data-markdown="SLIDES.md"
                data-separator="^\r?\n---\r?\n$"
                data-separator-vertical="^\r?\n--\r?\n$"
                data-separator-notes="^Note:"
              >
              </section>
            </div>
          </div>
          <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/markdown/markdown.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/highlight.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
          <script>
            Reveal.initialize({
              hash: true,
              plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
            });
          </script>
        </body>
      </html>`
  );
});

/**
 * Determine port based on mode. In production, use the published_port if available.
 * In development, always use the local_port.
 * DO NOT edit this port manually. Ports are managed by the system via the zosite.json config.
 */
const port =
  mode === "production"
    ? (config.publish?.published_port ?? config.local_port)
    : config.local_port;

export default { fetch: app.fetch, port };

Important notes:

  • This setup replaces the default React + Vite setup with a simple Reveal.js presentation
  • The presentation is served at the root route /
  • All Reveal.js assets are loaded from CDN (no build step required)
  • Uses Hono's html template tag for type-safe HTML generation
  • Works in both development and production modes
  1. Commit changes: Commit the changes from the project directory:
git add -A && git commit -m "Set up Reveal.js slideshow with markdown support"

Output

Inform the user that the Reveal.js presentation has been set up and is now live. Provide guidance on editing slides:

Editing your presentation:

Edit the SLIDES file to customize your slides. The presentation will update automatically when you refresh the page.

Markdown syntax for slides:

  • New horizontal slide: Use --- on its own line (three dashes)
  • New vertical slide: Use -- on its own line (two dashes)
  • Headings: Use # for title, ## for section headers, ### for sub-headers
  • Lists: Use - or * for bullet points, numbers for ordered lists
  • Code blocks: Use triple backticks with language name for syntax highlighting
  • Speaker notes: Add Note: on its own line followed by your notes (visible in presenter mode with 's' key)

Keyboard shortcuts:

  • Arrow keys or space to navigate slides
  • s to open speaker notes view
  • f for fullscreen
  • esc for overview mode

Customization:

  • Change theme by modifying the CSS link in server.ts (options: black, white, league, beige, sky, night, serif, simple, solarized)
  • Add custom styles by including a <style> tag in the HTML template
  • Configure Reveal.js options in the Reveal.initialize() call

Explore more Prompts

Create web-based presentation with Reveal.js | Zo Prompts