[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 ...
随机推荐
- vba,设置,excel,wps ,页面设置例子
Sub yemian()'按钮1点击触发 执行下面的命令With Sheets(1).PageSetup'对像是表格1的页面设置的函数PageSetup,下面是函数的属性修改前面加. .Orienta ...
- pringBoot Controller接收参数的几种常用方式
第一类:请求路径参数1.@PathVariable 获取路径参数.即url/{id}这种形式.2.@RequestParam 获取查询参数.即url?name=这种形式例子 GEThttp://loc ...
- WPF学习- AllowDrop 用户控件启用拖放功能
知识点: 创建自定义用户控件(UserControl) 使用户控件成为拖动源 使用户控件成为放置目标 使面板能够接收从用户控件放置的数据 创建项目: 1.新建WPF项目(Wpf-AllowDrop) ...
- Axis1.4框架 实现webservice服务器和客户端
一:软件环境 win7旗舰版, Eclipse,JDK1.6,tomcat6.0,Axis1.4的包. 至于Axis1.4包网上可以下载,如果是在找不到可以留言给我. 二:摘要 将解压后的 axis- ...
- adb 设备命令
一.adb 设备命令1.查看机型时,可以使用以下命令$ adb shell getprop ro.product.model 2.如果我们忘记具体系统属性的名字$ adb shell getprop ...
- Handler和内部类的正确用法
PS:本文摘抄自<Android高级进阶>,仅供学习使用 Android代码中涉及线程间通信的地方经常会使用Handler,典型的代码结构如下. public class HandlerA ...
- python 读取文件生成嵌套列表
def read_data(file_name): if not re.findall(".txt", file_name): file_name += ".txt&qu ...
- redis中基本命令
记录一下redis中的基本命令.redis中有redis-cli工具客户端,使用这个客户端来发送一些命令 一.redis-cli的使用 1.redis-cli使用之发送命令 2.redis-cli使 ...
- 零基础入门学习Python(12)--列表:一个打了激素的数组(3)
前言 这节课我们继续谈一下Python列表一些知识 知识点 Python常用操作符 比较操作符 >>> list1 = [123] >>> list2 = [234 ...
- 把wav文件等时长切割
ffmpeg -i somefile.mp3 -f segment -segment_time 1800 -c copy out%03d.mp3 segment_time 是切割时长,单位秒