如何开发一个酷炫的mdx

最新推荐文章于 2024-09-08 09:10:18 发布

huahuahuahuahuahua1

最新推荐文章于 2024-09-08 09:10:18 发布

阅读量381

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46715876/article/details/124905798

版权

本文介绍如何利用MDX和相关组件如mdx-deck和code-surfer创建一个酷炫的交互式PPT。内容包括设置mdx-deck创建基本幻灯片，利用code-surfer进行代码演示，以及如何添加动态GIF图。同时提供了相关资源链接供深入学习。

摘要由CSDN通过智能技术生成

使用mdx开发一个酷炫的ppt

效果展示：mdx-deck-slide-decks

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。这使得用组件编写较长的内容形成了一场冲击 🚀。

依赖

mdx-deck

//package.json
  "devDependencies": {
   
    "mdx-deck": "3.0.13"
  },

mdx-deck

基于 React 的演示幻灯片

Award-winning React MDX-based presentation decks

npm i -D mdx-deck@3.0.13

新建一个文件deck.mdx

├───deck.mdx --主要开发ppt文件
├───package.json --版本

配置scripts

  "scripts": {
   
    "start": "mdx-deck deck.mdx",
    "build": "mdx-deck build deck.mdx"
  },

标题

//deck.mdx引入文件

import {
    Head } from "mdx-deck";

<Head>
  <title>mdx-deck</title>
</Head>

This is a copy of [huawink's hooks demo](https://github.com/huahuahuahuahuahua/mdx-deck-slide-decks) from React Conf

简单的ppt

在这里插入图片描述

一页简单的ppt就形成了

--- 为分页

导入一张gif图片

...

---

<Image src="https://s3.amazonaws.com/jxnblk/mdx-deck.gif" />

在这里插入图片描述

layout，左右分页

...

---

<Split>

![](https://media.giphy.com/media/1CrejqXxVZs9q/giphy.gif)

- Otter Elevates
- For The 🏀 Dunk

</Split>

在这里插入图片描述

导入样式theme

import {
    Head } from "mdx-deck";
import {
    future, highlight, prism } from "@mdx-deck/themes";
export const themes = [future, pr

最低0.47元/天解锁文章

huahuahuahuahuahua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫