Presentation Writer

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) = \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.

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

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