Presentation Writer

by Markdown Preview Enhanced
powered by reveal.js

press ? key to see keyboard help.

press s key to open note window.

press arrow key to navigate.

press esc to toggle overview.

You can easily create beautiful presentation by running command

Markdown Preview Enhanced: Insert New Slide

Or just insert to your markdown file


Multiple Presentation themes are supported, you can change it easily from the extension settings.

vscode
atom

All features of Markdown Preview Enhanced are supported.

$f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$

You can set initialization config for your presentation.
Just add front-matter to your presentation markdown file.

---
presentation:
  width: 800
  height: 600
  controls: false
---

More information about front-matter settings can be found here.

Speaker notes is also supported (not in preview).
Press the s key on your keyboard to open the notes window.

To enable speaker notes, set front-matter as:

---
presentation:
  enableSpeakerNotes: true
---

To add notes, simply set data-notes property:

<!-- slide data-notes="Write your note here" -->

check Reveal.js Speaker Notes section for more information.

By default, all slides are aligned horizontally, but you can also create vertical slides by adding vertical=true.
For example:

<!-- slide vertical=true -->

You just discovered a vertical slide!

You can set id and class for your slide like this:

<!-- slide id="my-id" class="my-class1 my-class2" -->

You can set slide background very easily.
For example:

<!-- slide data-background-color="#ff0000" -->

Of course you can do more about slide background.

data-background-image
URL of the image to show. GIFs restart when the slide opens.
data-background-size
See background-size on MDN.
data-background-position
See background-position on MDN.
data-background-repeat
See background-repeat on MDN.

You can also set video background and iframe background.

data-background-video
A single video source, or a comma separated list of video sources.
data-background-video-loop
Flags if the video should play repeatedly.
data-background-video-muted
Flags if the audio should be muted.
data-background-iframe
Embeds a web page as a background.

Fragment is supported.

- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->

See this doc for different fragment animations
Item 1
Item 2

For example, the markdown snippet below will generate slide like...

<!-- slide data-background-image="https://i.loli.net/2017/07/12/5965b7edd3a2a.jpeg" data-transition="zoom" -->
<p style="color: #fff;">国漫大法好！</p>
<p style="color: #fff;">国漫大法好！</p>
<p style="color: #fff;">国漫大法好！</p>

国漫大法好！

It is also very easy to customize presentation css.
Run command:
Markdown Preview Enhanced: Customize Css
then edit:

.markdown-preview.markdown-preview {
  .slides {
    // This will modify all slides.
  }
  .slides > section:nth-child(1) {
    // This will modify `the first slide`.
    background-color: blue;
  }
}

You can check your presentation in browser by
right clicking at the preview, then choose

Open in Browser

Markdown Preview Enhanced can also generate beautiful HTML or PDF files for your presentation.

Star this project if you like it ;)

Github Repository can be found here
Feel free to post issues and request new features here
Source code of this presentation can be found here, raw