Markdown 和 React,让你写 PPT 变得无比简单

介绍

项目地址,先来一波 star 如何 😊

mdx-ppt 是一个帮助你快速创建类似 PPT 展示的网页的工具,你可以非常方便得通过写一个 Markdown 文件,创建一个 PPT 网页。

这类工具非常多,那么我为什么要重新开发一个呢?因为我用过的很多都是纯 Markdown 的,虽然同样方便,但是限制就变得非常多,因为 Markdown 的语法就那么一些,通常我们会通过增加语法来达到功能扩展的目的,但是这毕竟不是一般使用者能做的事情,而且语法多了之后页面会变得非常乱。

所以 mdx-ppt 选择的是 MDX,他让我们可以在 Markdown 语法的基础上,使用 React 组件,你可以像写一个 React 组件一样使用 React 的其他组件。

# This is markdown file

import Comp from 'your-component-path'

<Comp />

通过上面的代码,你就可以在最终生成的页面上,展示 <Comp /> 组件渲染出来的内容。

完整的例子可以查看这里

通过这种方式,我们给了你无限的扩展能力,你可以用 Markdown 来排版你的简单功能。而在你需要展示一些复杂的功能的时候,你就可以通过一个 React 组件来实现。同时你还能享受 React 的所有生态功能。

同时 mdx-ppt 提供了你非常丰富的扩展能力,你可以通过写一个 js 模块来自定义你的页面展示,对于 Markdown 的所有语法,都会有对应的组件来进行渲染,也就是说每个组件你都是可以自定义的。

// your theme.js
import styled from 'styled-components'

export default {
  components: {
    p: styled.p`
      color: red;
    `,
  },
}

然后你的页面上的所有 p 标签内的文字颜色都变成来红色。

详细配置可以看项目介绍

初衷

之前一段时间在慕课网上做课程,要求一定要提供 PPT,迫于无奈,每次都要做挺多的 PPT。

PPT 对于我这样平时基本不碰的开发者来说,排版无疑是非常蛋疼的一件事情。而且大部分 PPT 都长一样的情况下,每个 PPT 我还是得重新排版。而且 PPT 需要安装来才能访问,这无疑对于分享来说是非常不方便的。

所以在最近有空的时候搞了这个项目。做这个项目倒也不是说一定要做得多么牛逼,最首要的是符合自己的需求,当然既然当作开源项目拿出来推广了,如果有人提了 issue 或者 PR,那也是会根据情况考虑的。

我相信这个工具对于开发者来说是非常方便的,尤其是对于前端开发者来说。

以上,就是这次的项目介绍,最后希望来一波 star,你的关注能给予我很大的动力!

订阅技术周报