Prezen

A lightweight, zero‑dependency CLI for transforming GitHub‑flavored Markdown into full‑screen presentation slides. It bundles syntax highlighting, MathJax support, and a handful of ready‑made themes so you can write slides the way you write docs.

🧩 Overview

Prezen reads a Markdown file, splits it at horizontal rules (---), and wraps each section inside an SVG slide. It ships the generated HTML next to the source file (e.g. talk.md → talk.md.html) and gives you keyboard/touch navigation out of the box.

Front‑matter (via gray‑matter) lets you specify metadata such as title, theme, and paginate. The rendering is powered by marked with a small custom tokenizer to keep LaTeX backslashes intact.

🚀 Features

🔧 Installation

# clone the repo
git clone https://github.com/nguyengiabach1201/Prezen.git
cd Prezen

# install dependencies (using bun or npm/yarn)
bun install
# or
npm install

You can also build a standalone executable with bun build:

bun run build
# or
npm run build

💻 Usage

bun run src/prezen.js -f path/to/slides.md
# or, if you built the binary:
./prezen -f slides.md

Options:

Usage: bun prezen.js -f <file.md> [--pdf] [--pptx] [--preview] [--port 3000]

The output file will be ${input}.html. Open it in any modern browser to run the presentation.

⚡ Preview & Export

Both exporters rely on Puppeteer (Chromium) and the pptxgenjs library (bundled as dependencies). Exports may take a few seconds per slide depending on your machine.

📝 Markdown & Front‑Matter

Each horizontal rule (---) denotes a new slide. You may include YAML front‑matter at the top of the document:

---
title: "My Talk"
theme: academic
paginate: true
---

Valid front‑matter keys:

Standard GitHub‑Flavored Markdown (tables, fenced code, autolinks, HTML blocks) is supported via marked.

🎨 Themes & Custom Styling

Themes are simple CSS blobs imported from src/assets/styles/themes. You can select one via front‑matter or use your custom themes, note that you need to keep custom-theme.css in the same directory as the output HTML file:

---
theme: custom-theme.css
---

Currently, Prezen support one class, which is center that makes your presentation being aligned center vertically:

---
class: center
# or
class:
- center

You can also add additional styles inline:

---
style: |
    .slide { background: black; color: #fff; }
---

Custom CSS may also be passed by editing the generated HTML or using a wrapper script if you prefer.

🔢 Pagination & Navigation

Slides respond to:

The counter appears at the bottom when paginate: true.

🔍 Examples & Tests

Look at the examples/ directory for sample Markdown files and the corresponding generated HTML.

🛠 Development

To modify or extend the CLI, simply edit src/prezen.js and rerun the command. The project uses ES modules, so it works with Node 16+ or Bun.

📄 License

This project is licensed under the MIT License.


Happy presenting! 🎤