Skip to content
A preprocessor for utilizing an MDBook as slides for a presentation.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode initial Nov 10, 2018
api_docs/api add api docs Nov 11, 2018
example Travis (#4) May 21, 2019
src Travis (#4) May 21, 2019
Cargo.toml bump version number May 21, 2019
package.json * fix bug where chapter sub-items didn't get updated Nov 29, 2018
presentationHider.scss early draft of notes functionality. May 17, 2019
tsDocConfig.json add build pipeline Nov 11, 2018

MDBook Presentation Preprocessor

A preprocessor for utilizing an MDBook as slides for a presentation.

The goal of this project is to allow the writing of one MDBook that can be used as both presentation and mdbook style website.

See it in action here, the source for this is in the example directory.


First you need to install the pre-processor by running the following command.

cargo install mdbook-presentation-preprocessor

Next you need to add the preprocessor to your book.toml

authors = ["Your Name"]
multilingual = false
src = "src"
title = "An Interesting Thing"


Now you can freely use the following syntax to mark sections of your book as web only or presentation only.

# Header for the Page
This content should only be displayed when the page
is in web presentation mode

This content should only be displayed when the page
is in slide presentation mode
This content will always print to the console
when this page is loaded. This can be useful
when you break the dev-tools into its own window
and keep that on presenter facing screen

To toggle between slides and web, you can press alt+p.

A current limitation is that you would not be able to conditionally extend a bulleted or numbered list. Instead it will create a second list just below the first.

Since MDBook doesn't offer paging from the / route, if you are in presentation mode and at /, it will automatically reload the page at the first entry in the navigation list.

How It Works

The preprocessor does two things, first it replaces all of the directives with with HTML comments that have the same content.

<!-- slides-only-->

# Slides only information
- is
- found
- here

<!-- slides-only-end-->


# Web only information
Would be found here


Would be found here

Since inline HTML is still valid markdown it shouldn't impact the rest of your book's ability to render.

It also inserts some css as js to each page.

The js does a few things, maintains a new localStorage variable presentation_mode. The value 1 is for web and the value 0 is for presentation. It also loops through the DOM, including the comments to add a new class to slides/web items and print the notes via console.log. This would make the above look like this

<!-- slides-only-->
<h1 class="presentation-only">Slides only information</h1>
<ul class="presentation-only">
<!-- slides-only-end-->
<h1 class="article-content">Web only information</h1>
<p class="article-content">Would be found here</p>
Would be found here

It also updates these items to have another class that indicates if presentation_mode is Web or Slides.

Lastly it adds an event listener for the alt+p shortcut.

Depending on the value of presentation_mode it will update all of the wrapped items to have an additional class of either presenting or not-presenting. The css will set display: hidden; for any items that are .article-content.presenting or .presentation-only.not-presenting.


If you are interested in contributing, I would be happy for the help

If you are find a bug, please open an issue!

If you want to make a change to the source code, please consider the following

  • The ./presentationHider.ts file is where you should be editing any of the javascript
    • To update the actual javascript, please run tsc --outFile ./src/presentationHider.js
  • The ./presentationHider.scss file is where you should be editing any of the css
    • To update the actual css please run your sass compiler of choice to update ./src/presentationHider.css
    • I personally use rsass with the following command
      • rsass ./presentationHider.scss > ./src/presentationHider.css
  • When editing any of the rust functionality, please keep any of the logic outside of the impl Preprocessor block to allow the code to be tested

For reference see the api docs

You can’t perform that action at this time.