mdshow

Turn markdown files into beautiful presentations quickly.

Jan Christoph Ebersbach

2020-07-26

Agenda

  1. Intro mdshow
  2. Basics
  3. Incremental Display
  4. Backgrounds
  5. Pictures and Icons
  6. Advanced Formatting
  7. Charts

Intro mdshow

Turn markdown files into beautiful presentations quickly.

Markdown

mdshow is built to quickly turn ideas into beautiful presentations. The text-based markdown format is the tool of choice to do just that!

Features

  • Built with reveal.js 4.0 and pandoc 2.9
  • Focus: stays out of the way
  • Enterprise: theming and PDF conversion
  • Setup: super fast
  • Presentation: looks great and offers the power of the browser at your fingertips

Keybindings

  • <Space> advance to next slide
  • <Shift-Space> advance to previous slide
  • <f> enter full-screen mode
  • <s> show speaker notes
  • <Esc> enter slide overview and <Esc> to show selected slide
  • <Alt-Left Mouse Button> or <Ctrl-Left Mouse Button> zoom into slide

Examples

See for yourself.

Basics

Headings

h1

h2

h3

No heading.

Hidden slide

Text formatting

Regluar, italic, bold, and underlined.

Unordered List

  • Item 1
  • Item 2
  • Item 3

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Quotes

Famous Quote by Someone

Code Highlighting

function hello(msg) {
  alert(`Hello ${msg}`)
}

hello('world!');

Code Highlighting with Line Numbers

function hello(msg) {
  alert(`Hello ${msg}`)
}

hello('world!');

Code Highlighting with highlighted Line

function hello(msg) {
  alert(`Hello ${msg}`)
}

hello('world!');

Math formulas

$$ \sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6} $$

$$ e^{\pi i}=-1 $$

Table

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

Columns

  • Column 1
  • Column 1
  • Column 1
  • Column 2
  • Column 2
  • Column 2
  • Column 3
  • Column 3
  • Column 3

Animation

Incremental Lists

  • Item 1
  • Item 2
  • Item 3

Fragments

Breaks

  • Item 1
  • Item 2
  • Item 3

Animated List

  • Item 1
  • Item 3
  • Item 4

Animated List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Animated Colored Boxes

Animated Colored Boxes

App 1
App 2
Circle

Animated Colored Boxes

Circle
App 2
App 1

Backgrounds

Slide with background image

Slide with colored background

Pictures and Icons

Picture

Font Awesome Icon

Advanced Formatting

Colored text

Font Awesome Icon with Color

Font Awesome Stacked Icons

Box Shadow

Shadow top, right, bottom, left.

Shadow right, bottom, left.

Shadow right, bottom.

Shadow bottom, left.

Colored Boxes

App 1
App 2
Circle

Font Awesome Buttons

Picture Buttons

Charts

via chart.js

Bar Chart

Radar chart

Thank you

for using mdshow