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的更多相关文章

  1. [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 ...

  2. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  3. react build本地相对目录 "homepage": ".", package.json

    react build相对目录 "homepage": ".", package.json

  4. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

  5. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. react build和server start

    先到项目目录build项目 npm run build 项目会打包到dist文件夹下 index.html和index.js等 react的项目build后不能直接访问的问题 先执行 npm inst ...

  8. react build后直接从浏览器打开

    存在两个问题 一,资源文件路径 config/paths.js 这里原来的.pathname:'/', 改成.pathname:'./' function getServedPath(appPacka ...

  9. react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

    一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...

随机推荐

  1. php从mysql数据库中取数据

    php从数据库中取数据  面向过程 <?php $server_name="localhost:3306"; //数据库服务器名称 $username="root& ...

  2. STL中unique的使用

    作用 unique函数可以删除有序数组中的重复元素,即去重(并不是真正的删除,后面会讲) 定义在头文件<algorithm>中 函数原型 1.只有两个参数,且参数类型都是迭代器: iter ...

  3. 测试ip是否可以ping通

    7.写一个脚本hostping.sh,接受一个主机的IPv4地址做为参数,测试是否可连通.如果能ping通,则提示用户“该IP地址可访问”:如果不可ping通,则提示用户“该IP地址不可访问 参考脚本 ...

  4. 移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法

    其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标 ...

  5. selenium+python自动化unittest之跳过用例skip

    前言 当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例 ...

  6. Python --- 二叉树的层序建立与三种遍历

    二叉树(Binary Tree)时数据结构中一个非常重要的结构,其具有....(此处省略好多字)....等的优良特点. 之前在刷LeetCode的时候把有关树的题目全部跳过了,(ORZ:我这种连数据结 ...

  7. laydate组件选择时间段的判断

    前言: 在使用laydate组件的时候,难免会遇到选择时间段,官网给的文档中有选择时间段的组件,但是并不好用,首先只能选择一个月的时间段,有局限性,其次精确到时间的话要先选日期范围再选时间范围,很变态 ...

  8. LeetCode(64) Minimum Path Sum

    题目 Total Accepted: 47928 Total Submissions: 148011 Difficulty: Medium Given a m x n grid filled with ...

  9. UVaLive 4868 Palindrometer (暴力 / 构造)

    题意: 给定一个固定长度的字符串, 字符串是一个含有前导0的数字, 问这个数字加上多少能构成一个回文字符串. 分析: 其实这题有很多种方法, 方法12是我做完后看别人代码总结的, 方法3是我当时想的一 ...

  10. Uva 816 Abbott的复仇(三元组BFS + 路径还原)

    题意: 有一个最多9*9个点的迷宫, 给定起点坐标(r0,c0)和终点坐标(rf,cf), 求出最短路径并输出. 分析: 因为多了朝向这个元素, 所以我们bfs的队列元素就是一个三元组(r,c,dir ...