example.md

theme	transition	highlight	backgroundTransition	progress	controls	hideAddressBar	editor
black	slide	solarized-dark	zoom	true	true	true	fontSize theme 14 solarized_light

MarkShow

Markdown to Slideshow

Powered by Reveal.js

feedback is welcomed at

@motyar on Twitter

---

Custom styling

You also can override the theme style, check any theme source for more info

<style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&display=swap'); .slide { color:#116466; background: #2c3531;} .slide h1{ color: #ffcb9a; font-family: 'Playfair Display', serif; } .reveal p { color: #d1e8e2;} .reveal li{ color: #d1e8e2;} .reveal a { color: #89b08c; } .reveal .controls { color: #0a97b0; } .reveal .progress { color: #1b6ca8; } </style>

---

How

• Write your presentation as Markdown text
• Click on slide area to play
• Press E to edit again

---

features

Select a markdown slide file from your computer.

---

Or

Drag and Drop a markdown slide file anywhere on this webpage.

---

Or

Import from external source

Append mark.show/ to source file url

Example https://mark.show/DOMAIN.TLD/PATH/FILE_NAME.md

---

How to use Markdown to make beautiful presentations

Start a new slide with line break, three dashes, and another linebreak

Keyboard Shortcuts

Press ? when presenting.

---

Speaker View

This can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes.

Press the S key when presenting to open the notes window.

A speaker timer starts as soon as the speaker view is opened. You can reset the timer by clicking on it.

Note: This will only display in the notes window.

You can include inspirational quotes

You miss 100 percent of the shots you never take. ~Wayne Gretzky

---

Use tables

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

---

Auto animate

From this

--- ## Auto animated To this

---

Automatically animate matching elements across slides

---

---

---

Use Images

---

Slide attributes

Data background

---

Image as slide backgroud

---

... and GIFs!

---

data-transitions

in this slide we are using "convex-in fade-out"

---

data-transition "zoom-in zoom-out"

try none/fade/slide/convex/concave/zoom

---

Element attributes fragment

• Item 1
• Item 2

---

data-transition-speed

Slow or Fast

---

Emojis

�

---

1. Ordered list
2. Use a 1 on every line
3. And they will be given the correct sequence

..................................

• Unordered list

• Use any of these three characters

• And you will get a bulleted list

---

You embolden text like this or like this You emphasize text like this or like this Or do both at the same time You can also strikethrough text

---

Heading 1

Heading 2

Heading 3

Heading 4

---

Syntax highlighted code — powered by highlight.js

Supports all HighLightJs's 189 languages and 94 styles.

var docCookies = new Proxy(docCookies, {
  get: function (oTarget, sKey) {
    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
  },
  set: function (oTarget, sKey, vValue) {
    if (sKey in oTarget) { return false; }
    return oTarget.setItem(sKey, vValue);
  },
  defineProperty: function (oTarget, sKey, oDesc) {
    if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
    return oTarget;
  },
  getOwnPropertyDescriptor: function (oTarget, sKey) {
    var vValue = oTarget.getItem(sKey);
    return vValue ? {
      value: vValue,
      writable: true,
      enumerable: true,
      configurable: false
    } : undefined;
  },
});

---

Support for math using LaTeX

The Lorenz Equations

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

---

Feedback is welcomed

Reach us at @motyar on Twitter