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 in 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 and 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@Flickr. CC-BY 2.0 ----- # Code When also using Highlight.js 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.

This is an example of a slide with a specific Markdown dialect. ===============================================================

CSS & JavaScript magic

Just to emphasize my point, this last slide allows you to use a JavaScript powered menu to toggle the CSS style:

Black & white, Devopsy, Effects overload

Simplicity of Markdown married with full power of Impress.js!