[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 ...
- badblocks - 查询设备的坏区块
语法(SYNPSIS) badblocks [ -svwnf ] [ -b block-size ] [ -c blocks_at_once ] [ -i input_file ] [ -o outp ...
- C#在Excel的簡單操作--適用:與DB數據的簡單交互
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- CAD插入背景图片(网页版)
把图片作为背景图片可见但是不能编辑操作. 主要用到函数说明: _DMxDrawX::DrawImageToBackground 绘光栅图到背景.详细说明如下: 参数 说明 BSTR sFileName ...
- java_线程的同步机制
1.同步代码块: 使用synchronized包住可能会出现安全问题的代码 import static java.lang.Thread.sleep; class Test01{ public sta ...
- [Python3网络爬虫开发实战] 6.2-Ajax分析方法
这里还以前面的微博为例,我们知道拖动刷新的内容由Ajax加载,而且页面的URL没有变化,那么应该到哪里去查看这些Ajax请求呢? 1. 查看请求 这里还需要借助浏览器的开发者工具,下面以Chrome浏 ...
- phpstorm破解激活码
一.将“0.0.0.0 account.jetbrains.com”添加到hosts文件中 二.浏览器打开 http://idea.lanyus.com,点击页面中的“获得注册码”,然后在注册时切换至 ...
- uva 10596 - Morning Walk
Problem H Morning Walk Time Limit 3 Seconds Kamal is a Motashota guy. He has got a new job in Chitta ...
- CSS3 @font-face的url要添加?#iefix的原因
转至:https://github.com/CSSLint/csslint/wiki/Bulletproof-font-face When using @font-face to declare mu ...
- PHP:车牌照合法性
文章来源:http://www.cnblogs.com/hello-tl/p/7592362.html <?php /** * [verifyCarCard description] 效验车牌号 ...