# MarkShow
## Markdown to Slideshow
Powered by Reveal.js
#### feedback is welcomed at
<a href="http://twitter.com/motyar" target="_blank" data-preview-link="false" >@motyar</a> on Twitter
---
# 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.
<input accept=".txt,.md" type="file">
---
# Or
### Drag and Drop a markdown slide file anywhere on this webpage.
---
# Or
### Import from external source
<center><form>
<input name="source" class="url" value="" placeholder="Paste a source URL here and press Enter" autofocus="" tabindex="1" type="url">
</form></center>
Example `https://mark.show/demo.md`
---
### How to use Markdown to make beautiful presentations
Start a new slide with line break, three dashes, and another linebreak
---
### You can include inspirational quotes
>You miss 100 percent of the shots you never take. ~Wayne Gretzky
---
## You can also include notes for yourself in the Markdown file that won't display on the slide
Note: This text will not appear on the slide.
---
# Use Images
---
<!-- .slide: data-background="#000000" -->
# Slide attributes
## Data background
---
<!-- .slide: data-background="https://source.unsplash.com/600x600/?white" -->
# Image as slide backgroud
---
<!-- .slide: data-background="https://i.giphy.com/90F8aUepslB84.gif" -->
# ... and GIFs!
---
## data-transitions
in this slide we are using "convex-in fade-out"
<!-- .slide: data-transition="convex-in fade-out" data-background="#234" -->
---
<!-- .slide: data-transition="zoom-in zoom-out" -->
## data-transition "zoom-in zoom-out"
try none/fade/slide/convex/concave/zoom
---
## Element attributes fragment
- Item 1 <!-- .element: class="fragment " data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment " data-fragment-index="1" -->
---
<!-- .slide: data-transition="zoom-in zoom-out" data-transition-speed="slow"-->
### data-transition-speed
Slow or Fast
---
# Emojis
# 😍
---
1. Ordered list
1. Use a 1 on every line
1. 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
---
# Normal Heading 1
## Normal Heading 2
### Normal Heading 3
#### Normal Heading 4
---
# *Emphasized Heading 1*
## *Emphasized Heading 2*
### *Emphasized Heading 3*
#### *Emphasized Heading 4*
---
# ~~Strikethrough Heading 1~~
## ~~Strikethrough Heading 2~~
### ~~Strikethrough Heading 3~~
#### ~~Strikethrough Heading 4~~
---
Or you can use code blocks for longer examples, which use triple backticks and support syntax highlighting (as on GitHub):
Yeah, yeah, I know you want to see JavaScript:
```js
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);
},
deleteProperty: function (oTarget, sKey) {
if (sKey in oTarget) { return false; }
return oTarget.removeItem(sKey);
},
enumerate: function (oTarget, sKey) {
return oTarget.keys();
},
ownKeys: function (oTarget, sKey) {
return oTarget.keys();
},
has: function (oTarget, sKey) {
return sKey in oTarget || oTarget.hasItem(sKey);
},
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;
},
});
```
---
# There is also support for math using
LaTeX
Which, if you know how to use it, you are excited about:
\[\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 <a href="http://twitter.com/motyar" target="_blank" data-preview-link="false" >@motyar</a> on Twitter