WOGONG blog wiki read



Markdown presentation writer, powered by Electron
Created by Yuki Hattori ( @yhatt )


  • Slides are written in Markdown.
  • Cross-platform. Supports Windows, Mac, and Linux
  • Live Preview with 3 modes
  • Slide themes (default, gaia) and custom background images
  • Supports emoji :heart:
  • Render maths in your slides
  • Export your slides to PDF

How to write slides?

Split slides by horizontal ruler ---. It’s very simple.

# Slide 1



# Slide 2


Notice: Ruler (<hr>) is not displayed in Marp.


Marp’s Markdown has extended directives to affect slides.

Insert HTML comment as below:

<!-- {directive_name}: {value} -->
{first_directive_name}:  {value}
{second_directive_name}: {value}

Global Directives


Changes the theme of all the slides in the deck. You can also change from View -> Theme menu.

<!-- $theme: gaia -->
Theme name Value Directive
Default default <!-- $theme: default -->
Gaia gaia <!-- $theme: gaia -->

$width / $height

Changes width and height of all the slides.

You can use units: px (default), cm, mm, in, pt, and pc.

<!-- $width: 12in -->


Changes slide size by presets.

Presets: 4:3, 16:9, A0-A8, B0-B8 and suffix of -portrait.

<!-- $size: 16:9 -->

Page Directives

The page directive would apply to the current page and the following pages. You should insert it at the top to apply it to all slides.


Set true to show page number on slides. See lower right!

<!-- page_number: true -->


Set to use template of theme.

The template directive just enables that using theme supports templates.

$theme: gaia
template: invert

Example: Set "invert" template of Gaia theme.

Add a footer to the current slide and all of the following slides

<!-- footer: This is a footer -->

Example: Adds “This is a footer” in the bottom of each slide


Pre-renders a slide, which can prevent issues with very large background images.

<!-- prerender: true -->

Pro Tips

Apply page directive to current slide only

Page directive can be selectively applied to the current slide by prefixing the page directive with *.

<!-- *page_number: false -->
<!-- *template: invert -->

Slide background Images

You can set an image as a slide background.


Options can be provided after bg, for example ![bg original](path).

Options include:

  • original to include the image without any effects
  • x% to include the image at x percent of the slide size

Include multiple![bg](path) tags to stack background images horizontally.


Maths Typsetting

Mathematics is typeset using the KaTeX package. Use $ for inline maths, such as $ax^2+bc+c$, and $$ for block maths:

This is inline: $ax^2+bx+c$, and this is block:


Enjoy writing slides! :+1:


Copyright © 2016 Yuki Hattori This software released under the MIT License.

Published 2016-10-13 07:42:59 +0800
Updated 2016-10-12 23:42:59 +0000