vscode-reveal

This extension let you display a reveal.js presentation directly from an opened markdown document.

Full documentation here

Development platform baseline

The extension targets engines.vscode: ^1.105.0 and keeps @types/vscode aligned to the same API generation.
This baseline matches the current stable extension platform while still allowing patch/minor compatibility updates for contributors and CI.

Debugging in VS Code

Open the repository in VS Code and press F5. The workspace will:

1. Build the Node and web extension bundles with source maps.
2. Open a separate Extension Development Host window.
3. Map breakpoints in src/**/*.ts back to the generated bundle.

Use the Run Extension (F5) launch configuration. The existing watch tasks remain available when you want automatic rebuilds while editing.

Features

• Markdown
• Status bar
• Sidebar and navigation
• Theme
• Highlight Theme
• Reveal.js Options
• YAML Front Matter
• Open preview on right side
• Open in browser
• Print to PDF
• Export static Website
• Plugins
• FAQ

Markdown

Create reveal.js presentation directly from markdown file, open or create a new file in markdown and use default slide separator to see slide counter change in the status bar and title appear in the sidebar.

Since Reveal.js use marked to parse the markdown string you can use this in your document:

• GitHub flavored markdown.
• GFM tables

Fragments can be authored directly in markdown with attributes (no raw HTML needed):

- First point {.fragment}
- Then emphasize this {.fragment .highlight-red}
- Finally this one {.fragment data-fragment-index="2"}

Paragraph shown later {.fragment .fade-up}

To reveal every list item incrementally, set revealjs.incremental to true in VS Code settings or use incremental: true in a deck's front matter.

If you need a sample file you can get it here: https://raw.githubusercontent.com/evilz/vscode-reveal/master/sample.md

Status bar

As soon as your markdown document has at least two slides, slides counter will appear in the status bar on right.

Clicking on slide counter will launch preview on right, and you can now see the local address of express server used to host Reveal presentation. Clicking on the address will launch presentation in the browser.

You can stop express server when you want by clicking on the red square.

Sidebar and navigation

Now in version 2, you can see a list of all your slides on the sidebar. The list will show the first line of text that is found in the slide, most of the time it will be a title, but it can also be an image or something else.

Blue icon is used to show horizontal slide, orange is used for vertical ones.

Clicking on slide name will move the cursor on beginning of the slide in the editor. If the preview is opened it will also show the selected slide on it.

Theme

reveal.js comes with a few themes built in:

• black - Black background, white text, blue links (default)
• white - White background, black text, blue links
• league - Gray background, white text, blue links
• beige - Beige background, dark text, brown links
• sky - Blue background, thin dark text, blue links
• night - Black background, thick white text, orange links
• serif - Cappuccino background, gray text, brown links
• simple - White background, black text, blue links
• solarized - Cream-colored background, dark green text, blue links
• blood - Dark background, thick white text, red links
• moon - Dark blue background, thick grey text, blue link

You can set it using revealjs.theme parameter in Vs code config or in the document itself using front matter.

If you want a custom theme you can do it! Just add custom style to a CSS file in the same folder that your markdown.

example: if your file name is my-theme.css just add this in the front matter header :

---
customTheme : "my-theme"
---

Note that you can use both theme and custom theme at the same time. Your custom theme will be loaded after to override default reveal.js theme.

Path resolution rules for local assets and export:

• customTheme, css, init.js, and init.esm.js are resolved from the markdown document folder when the document is saved (file: and remote vscode-remote: documents).
• For unsaved untitled: documents, relative paths resolve from the matching workspace folder (or the first workspace folder if no direct match exists).
• For virtual/non-file documents without a workspace folder, relative local asset paths are ignored gracefully (remote URLs still work).
• revealjs.exportHTMLPath keeps absolute paths as-is; relative export paths resolve from the same base folder rules above.
• If a markdown file is outside the workspace, its own folder remains the resolution base to avoid cross-workspace surprises.

Highlight Theme

You can use code block in your markdown that will be highlighted by highlight.js. So you can configure the coloration theme by setting revealjs.highlightTheme parameter of VS Code, or set it using front matter.

---
highlightTheme : "other theme"
---

Get the theme list here https://highlightjs.org/

Diagram server (Kroki)

Diagram languages supported by Kroki (for example mermaid, plantuml, graphviz, etc.) can be rendered remotely.

• revealjs.diagramServerEnabled (default: true) keeps current behavior and renders diagrams as images.
• revealjs.diagramServerUrl (default: https://kroki.io) lets you target your own Kroki-compatible endpoint.

For a fully local/offline mode, set:

offline: true

In this mode, the extension does not load its CDN-hosted MathJax runtime or seminar socket client, and diagram code blocks are kept as plain code blocks rather than triggering remote diagram requests. Font Awesome and all other extension assets are bundled locally. User-authored remote images, stylesheets, and scripts remain under the presentation author's control.

Custom initialization

Place an init.js file next to your markdown file to replace the default Reveal.js initialization script. If your initialization needs ECMAScript modules, use init.esm.js instead; it is loaded as <script type="module">, so it can use standard import statements for files served from the same folder. When both files exist, init.esm.js takes precedence. init.esm.js must be a complete custom initialization script and initialize Reveal itself, just like init.js.

Reveal.js Options

You can customize many setting on for your reveal.js presentation.

Configuration contract notes (validated by unit tests):

• Runtime-only/frontmatter options: author, autoPlayMedia, customHighlightTheme, customTheme, defaultTiming, description, display, enableTitleFooter, fragmentInURL, logLevel, logoImg, notesSeparator, separator, verticalSeparator.
• VS Code-contributed only options: hashOneBasedIndex, showSlideNumber.

YAML Front Matter

You can change settings directly in your markdown file using front matter style. You can change all extention settings like this :

---
theme : "white"
transition: "zoom"
---

Note do not add revealjs. prefix before setting name.

Create a new presentation

You can scaffold a new presentation directly from built-in templates:

• run the command Revealjs: New presentation from template
• choose a starter template (Minimal, Code-heavy, Speaker notes, or Custom theme)
• pick where to save the .md file

When a template needs local assets (for example Custom theme), the extension creates only the required supporting files next to your presentation.

Open preview on right side

To display the preview on the right side you can :

• click on slide count in status bar
• click split icon in sidebar header
• call command Revealjs: Show presentation by side

The preview will be synchronize with the current cursor position.

Open in browser

To display presentation in the browser you can:

• click on server address in the status bar
• click the icon in sidebar header
• call command Revealjs: Open presentation in a browser

This uses VS Code's native external URL API by default (same behavior as opening a URL from VS Code).

If revealjs.browserPath is set, the extension uses that executable path to launch the presentation instead of the VS Code default external opener.

Presenter view / speaker notes

To open a dedicated presenter workflow (speaker notes + current/upcoming slide):

• call command Revealjs: Open presenter view in browser
• or use Revealjs: Open presentation in a browser, then press S

How it works with the main deck preview:

• presenter view opens a browser tab for the current deck and automatically launches Reveal.js speaker view in a second popup window
• navigation stays synchronized between the deck tab and the speaker window
• speaker notes authored in markdown (note: / <aside class="notes">) are shown in the presenter window

Supported execution modes:

• ✅ external browser mode (default browser or revealjs.browserPath): fully supported
• ⚠️ VS Code webview side preview: does not provide a first-class presenter popup workflow

Print to PDF

To export your presentation to pdf you can:

• click on PDF icon in the sidebar
• call the command Revealjs: Export in PDF

This opens the print URL using the same browser resolution rules as above:

• if revealjs.browserPath is set and valid, that executable is used
• otherwise VS Code's native external URL API is used

PDF export uses Reveal.js print settings. Set revealjs.pdfSeparateFragments to false to keep fragments on the same exported page, set revealjs.pdfMaxPagesPerSlide to cap slide overflow pages, and use revealjs.slideNumber formats such as h/v when you need formatted slide numbers.

Be sure to set print setting correctly:

• No margin
• print background

Export static Website

To export your presentation to a static website you can:

• click on HTML icon in the sidebar
• call the command Revealjs: Export in HTML

The export runs in the extension host and then opens the export folder using VS Code native APIs.

Folder-open fallback behavior:

• first try revealFileInOS (native reveal in file manager)
• if unavailable, fallback to vscode.env.openExternal with a file:// URI

Plugins

Disable slideout menu

---
enableMenu: false
---

Disable chalkboard

---
enableChalkboard: false
---

Disable title footer

---
enableTitleFooter: false
---

Disable zoom

---
enableZoom: false
---

Disable search

---
enableSearch: false
---

FAQ

Note : The first time, Windows will ask you about the firewall. If you open the port for the application, you can see your presentation remotely.

Known Issues

Please add issues on github.