[React] Build a slide deck with mdx-deck using Markdown + React
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"
},
[React] Build a slide deck with mdx-deck using Markdown + React的更多相关文章
- [MDX] Build a Custom Provider Component for MDX Deck
MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Providerco ...
- react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置A ...
- react build本地相对目录 "homepage": ".", package.json
react build相对目录 "homepage": ".", package.json
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react build和server start
先到项目目录build项目 npm run build 项目会打包到dist文件夹下 index.html和index.js等 react的项目build后不能直接访问的问题 先执行 npm inst ...
- react build后直接从浏览器打开
存在两个问题 一,资源文件路径 config/paths.js 这里原来的.pathname:'/', 改成.pathname:'./' function getServedPath(appPacka ...
- react网页版聊天|仿微信、微博web版|react+pc端仿微信实例
一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...
随机推荐
- Ubuntu 几个常用的更新命令
apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...
- 迅为I.MX6Q开发板配不同分辨率不同尺寸液晶屏幕
I.MX6Q开发板: 核心板参数 尺寸:51mm*61mm iMX6Q四核CPU:Freescale Cortex-A9 四核 i.MX6Q,主频 1.2 GHz iMX6DL双核CPU:Freesc ...
- C# 设置系统环境变量
using Microsoft.Win32; using System; using System.Collections.Generic; using System.ComponentModel; ...
- cron - 定期执行指定命令的守护程序 (Vixie Cron)
总览 cron 描述 Cron 应该由 /etc/rc 或者 /etc/rc.local 启动(译注:有很多发行版与此不同的,如 RedHat6.x 使用 /etc/rc.d/init.d/crond ...
- CREATE TYPE - 定义一个新的数据类型
SYNOPSIS CREATE TYPE name AS ( attribute_name data_type [, ... ] ) CREATE TYPE name ( INPUT = input_ ...
- Goldengate完成Mysql到Mysql的数据同步
文档参考地址:http://blog.csdn.net/u010587433/article/details/49305019 需求: 使用Goldengate完成Mysql到Mysql的数据同步,源 ...
- 下载GitHub指定目录的文件
使用网站 https://minhaskamal.github.io/DownGit/#/home
- 使用 reduce 实现数组 map 方法
//使用 reduce 实现数组 map 方法 const selfMap2 = function (fn, context){ let arr = Array.prototype.slice.cal ...
- hdu 2377 Bus Pass
Bus Pass Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 【BZOJ 1202】 [HNOI2005]狡猾的商人(枚举区间也可行)
题链:http://www.lydsy.com/JudgeOnline/problem.php?id=1202 其实也可以不使用加权并查集,通过画图可以发现,一个长区间和其包含的区间能够算出一个新区间 ...