zl程序教程

您现在的位置是:首页 >  前端

当前栏目

[React] Build a slide deck with mdx-deck using Markdown + React

React with Using build markdown
2023-09-14 08:59:17 时间

In this lesson we'll use mdx-deck to create a slide deck using Markdown and React. We'll look at adding multiple slides, code snippets, and importing React components. We'll also leverage the mdx-deck CLI for our development environment and building for production.

Additional Resources:

https://egghead.io/lessons/react-create-and-import-react-components-with-markdown-using-mdxc

https://github.com/jxnblk/mdx-deck

https://twitter.com/jxnblk/status/1023667155324346373

 

Install:

yarn add mdx-deck

 

deck.mdx:

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

# Hello! this is my first slide!

---

# We will see how mdx-deck works

```notes
These are only visible in presenter mode
```

---

```jsx
<Button />
```

---

import Counter from 'components/Counter'

<Counter />

 

package.json:

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