Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

mdx-ppt

0.1.0 • Public • Published

MDX-PPT

通过 MDX 语法,让你便捷组织你的内容的同时,可以便捷地展示你的内容。使用 MDX 你还可以享受 React 非常强大的组件化功能,让你可以任意展示你的创意。

目前该项目仍然出于非常早期的开发阶段,API 变动会非常频繁,并且可能会有较多的 bug,如果你想要使用稳定功能,可以点击右上角的 starwatch release 来获取最新的发布信息。

语法

本工具基于 mdx,所有其语法都支持,在此基础上,增加来以下功能

PPT

+++
title: Hello
+++
 
# This is PPT1

通过两个+++包裹的部分,里面的内容遵从yaml的语法,会被解析成 props 传递给 Page 组件。上一个 +++ 区域到下一个之间成为一个 Page,里面的内容会作为 Pagechildren

item-props

mdx中每一个 block 都会以特定组件进行渲染,比如:

这是一段话

会渲染成 <p>这是一段话</p>,而这个 p 组件是可以自定义的,那么当然他也可以接收 props。我们可以通过以下方式来进行添加:

===color=red,size=24
这是一段话

那么 p 组件就会接收到:

{
  color: 'red',
  size: 24
}

以上只是甜品

Markdown在编译成网页时最大的劣势是局限性较大,毕竟Markdown的最大目的是以内容为中心,减少不必要的排版规则。所以如果单单以 Markdown 作为 PPT 的基础,那么明显功能是非常简陋的。

但是,MDX则完全解决来这个问题,你可以通过自己定义组件来展示任何你想展示的内容,比如:图表

+++
+++

<YourChartComponent />

一个展示图表的 Page 就完成来,而且,你可以充分享受其可交互性,你的图表可以基于任何前端库,Highcharts、D3等等等等。

使用

你可以非常方便得通过指定文件来启动开发服务

mdx-ppt -e ppt.mdx

或者你可以指定一个配置文件

mdx-ppt --c config-file-path

config

module.exports = {
  // 目标 mdx 文件
  entry: 'example/test.mdx',
  // 注入自定义的内容
  inject: 'example/client.js',
  // 开发端口
  devPort: 8888,
  // 这两个是 `mdx` 的配置项,你可以自己扩展编译器的功能
  // 参考:https://mdxjs.com/guides/writing-a-plugin
  remarkPlugins: [],
  rehypePlugins: [],
  // 自定义webpack
  webpack(config) {
    // return new config
  },
}

custom

client.js

export default {
  // 用来指定 `transition`
  // 目前支持 `fade` 和 `slide`
  // 自定义 transition 的功能正在开发中
  transition: 'fade',
  // 自定义编译之后的具体展示组件
  components: {
    p,
  },
  // ... 更多正在开发中
}

可自定义的组件

可以查看这里

内部自定义来大部分组件,采用的样式参考了 github-markdown-css,样式使用 styled-components 来进行定义,你可以非常方便得在这基础上来扩展组件

// client.js
 
import { components } from 'mdx-ppt'
 
import styled from 'styled-components'
 
const p = styled(components.p)`
  color: red;
`
 
export default {
  // ...
  components: {
    p,
  },
}

这样你可以即享用原来组件的样式,同时又进行自定义。

当然你可以直接覆盖原来的组件。

其他组件

Page

Pagemdx-ppt 扩展的组件,他代表来每一页 ppt,你可以通过对他进行自定义来扩展。

Roadmap

  1. 支持页面的自定义 transition
  2. 页面的 theme
  3. tests
  4. theme
  5. 移除 material-ui 的依赖

Keywords

none

Install

npm i mdx-ppt

DownloadsWeekly Downloads

2

Version

0.1.0

License

MIT

Unpacked Size

61.1 kB

Total Files

33

Last publish

Collaborators

  • avatar