[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 ...
随机推荐
- CAD交互绘制带周长面积的矩形框(com接口)
主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE ...
- vue工程化
很多人在玩完了官方文档的小例子之后,又不知道如何下手了.所以我这边帮大家把断层补上.大家首先要把vue的基本语法都熟悉了,然后再来这边学习. 有了前面webpack的铺垫,我们直接从vue的工程化开始 ...
- JavaSE-20 IO序列化
学习要点 定义 IO如何序列化 序列化 序列化:是将对象的状态存储到特定存储介质中的过程. 反序列化:从特定存储介质中的数据重新构建对象的过程. 实现了java.io.Serializable接口的类 ...
- Java调用WebService接口实现发送手机短信验证码功能,java 手机验证码,WebService接口调用
近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...
- js 页面图片等元素在普通元素中滚动动态加载技术
/*! * 2012-01-13 v1.1 偏移值计算修改 position → offset * 2012-09-25 v1.2 增加滚动容器参数, 回调参数 * 2015-11-17 v1.3 只 ...
- [BZOJ] 2431 逆序对数列
Time Limit: 5 Sec Memory Limit: 128 MB Submit: 2611 Solved: 1526 [Submit][Status][Discuss] Descripti ...
- ID字段不采用数据库自增长的几点理由
一个小程序,最初采用了 SqlServer 数据库,后来为了便于部署,转而采用了 Firebird 嵌入式数据库.在重构代码转到 Firebird 的过程中,对“数据实体的数据表的ID字段是否应该使用 ...
- mysql cluster配置
依赖包要求:cmake gcc gcc-c++ ncurses Perl ncurses-devel 在7.3以及更高的版本中, WITH_NDB_JAVA是默认 ...
- Go:map
一.map的创建方式 func main() { // map创建方式1 // 声明后再make var stu1 map[int]string stu1 = make(map[int]string, ...
- oracle的备份方式
一.完全备份 exp 用户/密码@库名 file=存储位置 二.RMAN https://www.cnblogs.com/Latiny/p/6920428.html RMAN在数据库服务器的帮助下实现 ...