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
<!-- slide -->

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)=f^(ξ)e2πiξxdξ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.

  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:

  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.

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="" 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