[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 ...
随机推荐
- WebSocket 的一些简单页面推送使用
因为做通信项目的时候,需要实时获取每个分机的当前状态,发现websocket还不错,只是对浏览器的要求比较高, 针对特定用户推送消息,网上有一些 public class GetHttpSession ...
- 【转】Google Chrome浏览器调试
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
- 使用Caliburn.Micro系列2:Convention
CM中实现一个比较有意思的特性,就是智能匹配. 通常使用MVVM的写法:在匹配 View和ViewModel时会使用DataContext,在匹配数据属性时使用Binding,在匹配事件命令时使用Co ...
- asp 读取 另外一个带参数的asp文件(服务器不支持!放弃吧!骚年!)
(服务器不支持!放弃吧!骚年!) 主要作用是为了分离数据库,灵感是这样的:收到json影响,把asp里的数据,用一个页面输出,然后用另外一个页面读取,这样就不用有数据库位置的烦恼了 代码 网上有很多, ...
- android实战简易教程-链接
http://blog.csdn.net/yayun0516/article/category/2799943
- Libjingle 库
Libjingle 是google talk voice(语音聊天) 和 p2p interoperability(点对点操作)库,是提供了google talk,p2p文件共享和语音呼叫能力的组件集 ...
- cc.Label
cc.Label 1:cc.Label是显示文字的组件;2:cc.Label属性面板: String: 文本显示的内容; Horiznotal: 水平对齐的方式: 左 右 居中; Vertial ...
- Git 教程 -- 第一天
什么是Git? Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. 为什么使用Git? 众所周知,版本控制系统分为集中式版本控制系统(SVN.CVS等)与分布式版 ...
- docker配置国内加速器
一.登录到daocloud网站后选择如下地址的加速器 二.根据配置提示在linux上执行对应的配置命令: curl -sSL https://get.daocloud.io/daotools/set_ ...
- LeetCode(55)Jump Game
题目 Given an array of non-negative integers, you are initially positioned at the first index of the a ...