[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 ...
随机推荐
- CentOS 6.4 linux下编译安装MySQL5.6.14
CentOS 6.4下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版本的5.6.14. 正文: 一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm ...
- chatops--rocketchat+hubot
chatops--rocketchat+hubot 原文地址:http://www.cnblogs.com/caoguo/p/7221956.html 先放几张图 # rocket.chat # hu ...
- 怎样在nexus 中 搜索到远程maven仓库中的jar 文件
怎样在nexus 中 搜索到远程maven仓库中的jar 文件 url: http://www.oschina.net/question/95712_21999 点击Administration菜单下 ...
- splice用法解析
splice()方法算是最强大的数组方法了,它有很多种用法,主要用于删除指定位置的数组项,在指定的位置插入数组项,在指定位置替换数组项,slpice()方法始终都会返回一个数组,该数组包括从原始数组中 ...
- CAD参数绘制mcdbsolid对象(com接口)
C#中实现代码说明: private void DrawSolid() { //绘McDbSolid对象 axMxDrawX1.AddLinetype("MLineType1", ...
- VS2017 ATL创建ActiveX编程要点
VS2017 ATL创建ActiveX控件编程要点: 一.创建vs项目需要安装器visual studio installer中: 安装 visual studio扩展开发中的 用于x86和x64的V ...
- js进行的一些判断
表达式 "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$& ...
- SQL server 表操作语句(原创)
CREATE TABLE [dbo].[test] ([id11] int NOT NULL ,[as] varchar(1) COLLATE Chinese_PRC_CI_AS NULL ,[asd ...
- Bullet:MySQL增强半同步参数rpl_semi_sync_master_wait_point值AFTER_SYNC和AFTER_COMMIT的对比实验
MySQL 5.7.22启用增强半同步复制 MySQL对该参数值的描述 Semisync can wait for slave ACKs at one of two points, AFTER_SYN ...
- 笔试算法题(50):简介 - 广度优先 & 深度优先 & 最小生成树算法
广度优先搜索&深度优先搜索(Breadth First Search & Depth First Search) BFS优缺点: 同一层的所有节点都会加入队列,所以耗用大量空间: 仅能 ...