Skip to content

dplabs/mdeck

Repository files navigation

mdeck

A modern, extensible browser-based Markdown slideshow library — built on Vite, TypeScript, and markdown-it.

mdeck is based on remark by gnab. It preserves full compatibility with remark's Markdown slide syntax while modernizing the tooling and opening up the parser for extensibility via markdown-it plugins.


Features

  • Full remark Markdown compatibility — existing slide decks work without changes
  • markdown-it powered — access the parser instance to attach any markdown-it plugin
  • Syntax highlighting via highlight.js
  • Presenter mode with speaker notes, next-slide preview, and timer
  • Clone mode — sync two windows via postMessage (laptop + projector)
  • Slide scaling — consistent layout across all screen resolutions
  • Touch support — swipe to navigate on mobile/tablet
  • URL deep linking — current slide tracked in the hash (#3)
  • Content classes — apply CSS classes to inline or block content
  • Macros — reusable slide directives
  • TypeScript — fully typed, ESM-first, with a UMD build for <script> tags

Quick start

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<textarea id="source">
# Slide 1

Hello, world!

---

# Slide 2

Another slide.
</textarea>
<script src="mdeck.umd.cjs"></script>
<script>
  mdeck.createSlideshow();
</script>
</body>
</html>

Examples

Live demos are published to GitHub Pages on every release:

Example Description
Default deck Quick demo with a default deck
Advanced Custom CSS classes, markdown-it plugins, macros
Controls All keyboard, mouse, and touch controls
External source Load slides from an external .md file via sourceUrl
Inline source Pass Markdown directly via the source option
remark.js compat remark.js compatibility demo

To run the examples locally, see Getting started.


Documentation

  • Getting started — installation, ESM/UMD usage, sourceUrl, running examples, building from source
  • Markdown syntax — separators, incremental slides, properties, templates, content classes, speaker notes, macros, code highlighting
  • API referencecreateSlideshow(), all options, convert(), markdownIt, highlighter, macros, Slideshow instance methods
  • Controls — keyboard shortcuts, mouse, touch gestures
  • Presenter mode — presenter view, clone mode, timer, speaker notes, inheritPresenterNotes

Credits

mdeck is based on remark by gnab and contributors, which pioneered the browser-based Markdown slideshow format and established the slide syntax this library is compatible with.

remark mdeck
Tooling Plain JS, no bundler TypeScript, Vite
Markdown parser marked markdown-it (extensible)
Distribution Single-file CDN script ESM + UMD, npm package
API Class-based (remark.create()) Named exports (createSlideshow())
Plugin system None Full markdown-it plugin ecosystem

License

MIT

About

A modern, extensible Markdown slideshow library — TypeScript rewrite of remark.js with markdown-it, ESM/UMD builds, presenter mode, and plugin support.

Topics

Resources

Contributing

Stars

Watchers

Forks

Contributors