# 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 ![Sample image](https://source.unsplash.com/600x300/?pink) --- <!-- .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} &amp; = \sigma(y-x) \\ \dot{y} &amp; = \rho x - y - xz \\ \dot{z} &amp; = -\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