1
1
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-04 05:53:39 +03:00
♠️ React MDX-based presentation decks
Go to file
Brent Jackson f52e6cb6d6 v2.3.2
2019-04-21 20:40:38 -04:00
docs v2.3.2 2019-04-21 20:40:38 -04:00
examples v2.3.2 2019-04-21 20:40:38 -04:00
packages v2.3.2 2019-04-21 20:40:38 -04:00
templates/basic v2.3.2 2019-04-21 20:40:38 -04:00
.gitignore Reorganize modules 2019-03-02 15:17:14 -05:00
.prettierrc Basic monorepo setup 2019-03-02 14:10:16 -05:00
.travis.yml Add now config 2019-03-10 21:44:13 -04:00
babel.config.js Basic test setup 2019-03-09 17:13:23 -05:00
CHANGELOG.md Edit changelog 2019-04-21 18:03:24 -04:00
CONTRIBUTING.md Update contributing docs 2019-04-13 12:10:30 -04:00
lerna.json v2.3.2 2019-04-21 20:40:38 -04:00
LICENSE.md Edit readme 2018-07-29 12:37:09 -04:00
MIGRATION.md Adjust prettier setup 2019-03-16 13:08:20 -04:00
netlify.toml Add netlify config 2019-04-11 20:07:00 -04:00
package.json Add examples 2019-04-21 20:07:57 -04:00
README.md Adde symlink for readme 2019-03-16 13:15:19 -04:00
yarn.lock Update deps 2019-04-21 17:48:32 -04:00

MDX Deck

Award-winning MDX-based presentation decks

Build Status Version Downloads

npm i -D mdx-deck

View demo

Getting Started

Create an MDX file and separate each slide with ---.

# This is the title of my deck

---

# About Me

---

```jsx
<CodeSnippet />
```

---

import Demo from './components/Demo'

## <Demo />

# The end

Add a run script to your package.json with the MDX Deck CLI pointing to the .mdx file to start the dev server:

"scripts": {
  "start": "mdx-deck deck.mdx"
}

Start the dev server:

npm start

Videos & Articles

Using MDX

MDX can use Markdown syntax and render React components with JSX.

Imports

To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.

import { Box } from 'grid-styled'

<Box color="tomato">Hello</Box>

Read more about MDX syntax in the MDX Docs.

Theming

MDX Deck uses emotion for styling, making practically any part of the presentation themeable.

Built-in Themes

MDX Deck includes several built-in themes to change the look and feel of the presentation. Export theme from your MDX file to enable a theme.

export { dark as theme } from 'mdx-deck/themes'

# Dark Theme

MDX uses exports as a way for files to communicate with their parent components. For a list of available themes see the Themes Docs.

Custom Themes

A custom theme can be provided by exporting theme from the MDX file.

export { default as theme } from './theme'

# Hello

The theme should be an object with fields for fonts, colors, and CSS for individual components.

// example theme.js
export default {
  // add a custom font
  font: 'Roboto, sans-serif',
  // custom colors
  colors: {
    text: '#f0f',
    background: 'black',
    link: '#0ff',
  },
}

Read more about theming in the Theming docs

Components

MDX Deck includes built-in components to help with creating presentations, including a full screen Image component, the Appear component that allows stepping through parts of a single slide, and the Notes component for adding speaker notes.

Read more in the components docs.

Libraries

These third-party libraries are great for use with MDX Deck.

  • CodeSurfer: React component for scrolling, zooming and highlighting code.
  • mdx-code: Runnable code playgrounds for MDX Deck.
  • mdx-deck-live-code: Live React and JS coding in slides.

Note: please check with version compatibility when using these libraries.

Layouts

Each slide can include a custom layout around its content. This can be used as a substitute for slide templates found in other presentation apps and libraries.

// example Layout.js
import React from 'react'

export default ({ children }) => (
  <div
    style={{
      width: '100vw',
      height: '100vw',
      backgroundColor: 'tomato',
    }}>
    {children}
  </div>
)
import Layout from './Layout'

# No Layout

---

<Layout>

# Custom Layout

</Layout>

The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS.

Built-in Layouts

MDX Deck includes some built-in layouts for inverting theme colors and changing the layout of a slide. Read more about built-in layouts.

Presenter Mode

MDX Deck includes a built-in Presenter Mode, with a preview of the next slide and a timer.

presenter mode screenshot

To use presenter mode:

  1. Open your presentation and press Option + P to enter Presenter Mode
  2. Click on the link in the bottom to open the presentation in another tab
  3. Move the other window to the screen for the audience to see
  4. Control the presentation from your window using the left and right arrow keys the other window should stay in sync
  5. Be sure to move your cursor so that it doesn't drive anyone in the audience crazy

Speaker Notes

Notes that only show in presenter mode can be added to any slide. Speaker notes can be added using the <Notes /> component.

import { Notes } from 'mdx-deck'

# Slide Content

<Notes>Only visible in presenter mode</Notes>

Overview Mode

Overview Mode

When editing a slide deck, toggle overview mode with Option + O. This shows a list of all slides on the left and a preview of the current slide on the right.

Keyboard Shortcuts

Key Description
Left Arrow Go to previous slide (or step in Appear)
Right Arrow Go to next slide (or step in Appear)
Space Go to next slide (or step in Appear)
Option + P Toggle Presenter Mode
Option + O Toggle Overview Mode

Exporting

Add a build script to your package.json to export a presentation as HTML with a JS bundle.

"scripts": {
  "build": "mdx-deck build deck.mdx"
}

See more exporting options in the Exporting Documentation

CLI Options

-p --port     Dev server port
-h --host     Host the dev server listens to
--no-open     Prevent from opening in default browser
-d --out-dir  Output directory for exporting
--webpack     Path to custom webpack config file
--no-html     Disable static HTML rendering

Docs

Real Examples

See how others have used MDX Deck for their presentations.

Usage Examples

The following examples will open in CodeSandbox.


MIT License