+
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
+
For the best experience please use the latest Chrome, Safari or Firefox browser.
+
+
+
+# Markdown
+## to author Impress.js presentations
+
+* This presentation was written entirely in Markdown
+* Added by popular request
+ * Easy way to make quick, simple yet aesthetic, presentations
+ * Authoring without all the clutter of HTML
+
+-----
+# Markdown.js
+
+* Provided by [Markdown.js](https://github.com/evilstreak/markdown-js) in [extras/](https://github.com/henrikingo/impress.js/tree/myfork/extras)
+* Jot down your bullet points in *Markdown* & have it automatically converted to HTML
+* Note: The Markdown is converted into a presentation client side, in the browser. This is unlike
+ existing tools like [Hovercraft](https://github.com/regebro/hovercraft) and
+ [markdown-impress](http://binbinliao.com/markdown-impress/) where you generate a new
+ html file on the command line.
+* This combines the ease of typing Markdown with the full power of impress.js HTML5+CSS3+JavaScript!
+
+-----
+# Styles
+
+* You can use *italics* & **bold**
+* ...and `code`
+
+
+-----
+# A blockquote & image
+
+
+
+> Spread love everywhere you go.
+> Let no one ever come to you without leaving happier.
+
+*-- Mother Teresa*
+
+Image credit: [Peta de Aztlan](https://www.flickr.com/photos/peta-de-aztlan/3476636111/)@Flickr. CC-BY 2.0
+
+-----
+# Code
+
+When also using [Highlight.js](https://highlightjs.org/) integration, code blocks in Markdown
+are converted to HTML first, then colored by Highlight.js:
+
+ // `init` API function that initializes (and runs) the presentation.
+ var init = function () {
+ if (initialized) { return; }
+ execPreInitPlugins();
+
+ // First we set up the viewport for mobile devices.
+ // For some reason iPad goes nuts when it is not done properly.
+ var meta = $("meta[name='viewport']") || document.createElement("meta");
+ meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
+ if (meta.parentNode !== document.head) {
+ meta.name = 'viewport';
+ document.head.appendChild(meta);
+ }
+
+-----
+
+# Slide separator
+
+* 5 dashes are used to separate slides:
+
+`-----`
+
+* Attributes from `div.step` element are simply repeated.
+ * Better use relative positioning, lest your slides will all be on top of each other.
+* If you need to set some attributes, just use HTML and create a div element, then write
+ Markdown inside each div.
+
+
+
+# Title slide
+## This slide has different CSS class than the previous ones
+
+
+
+
+# Simplicity of Markdown & Full power of Impress.js
+
+* This slide sets its own `rotate`, `x`, `y`, and even `z` coordinates
+* Note that the Mother Teresa slide earlier was pimped with some custom CSS, all the while
+ the content was written in simple Markdown.
+
+
+
+
+
+
+
CSS & JavaScript magic
+
+
Just to emphasize my point, this last slide allows you to use a JavaScript powered menu to
+toggle the CSS style:
+
+
,
+,
+
+
+
Simplicity of Markdown married with full power of Impress.js!
+
+
+
+
+
+
+
+