[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 ...
随机推荐
- Vue全局添加组件或者模块
import Api from './api.js' export default { install (Vue) { Vue.prototype.$Api = Api } } 这种格式就可以在mai ...
- swift 待研备份
https://www.ctolib.com/topics-115290.html 但是还是用到了一个叫做 The Protocol Witness Table (PWT) 的函数表 https:// ...
- 微擎we7模块和模板安装方法
2017年06月08日 09:26:55 源码学习分享 阅读数:15643 标签: we7 更多 个人分类: 微擎we7 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- idea 中pom.xml依赖版本号报错(报红,如下图所示)
1.maven工程中出现的错误 2.解决办法:file->setting->Maven 如果还没好的话请尝试以下方法:
- nginx 服务器
1.windows版本的nginx启动报错 No mapping for the Unicode character exists in the target multi-byte code page ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
- eclipse 的开发环境配置
一.基础环境设置 1.jdk下载配置 2.JRE下载配置 3.Eclipse下载 4.Eclipde 与JRE配置,见图 二.PHP环境设置 1.apache + PHP 配置. 详见随笔文章:Ecl ...
- [BZOJ] 1037 [ZJOI2008]生日聚会
Time Limit: 10 Sec Memory Limit: 162 MB Submit: 3007 Solved: 1795 [Submit][Status][Discuss] Descript ...
- group 和 gshadow
group组文件 位置:/etc/group 作用:存放用户的分组信息 使用 /etc/group 命令查看时,得到的数据如下: 分析上图,可以得到以下结果 第1个字段:组名 默认组名与用户名名称一样 ...
- 使用requests+BeaBeautiful Soup爬取妹子图图片
1. Requests:让 HTTP 服务人类 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保持和连接池,支持使用cookie保持会话,支持文件上传,支持自动确定 ...