# react-down
**Repository Path**: clouddea/react-down
## Basic Information
- **Project Name**: react-down
- **Description**: 使用React组件化语言书写markdown和PPT，并能输出PDF。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-02-25
- **Last Updated**: 2022-05-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 简介
在文档书写过程中我们经常纠结于样式的设置，例如word和ppt的字体大小、颜色、布局等。对于非美工出身的人来说调出好看的样式确实是困难的事情。有没有一种现成的样式可以直接使用呢？其实office也提供了模板、母版的功能，但是用户还是能够显式的感知的和编辑样式，这种不透明性容易令书写不够专注和造成样式风格的不一致。
markdown可以解决word文档对样式透明性的要求，用户只需要更换主题即可做到更换整套文档样式，用户在书写时只需关注内容，不需要关注内容具体的呈现样式。但是markdown的扩展性是一个问题，它的扩展是第三方实现方式不一致的（例如footnotes、公式支持等），扩展功能较弱。
latex可以解决word文档和ppt透明性的要求，但是latex需要渲染成pdf，速度感人。而且第三方包的开发比较困难（对于我是这样的）、中文支持不友好。
针对以上问题，我们开发了ReactDown。
+ 基于前端技术，可以显著提高渲染速度。
+ 组件化的实现，可以实现扩展和样式透明的要求
+ 生态化运营（未实现），从而提高扩展功能的易用性、丰富性和一致性
+ 基于JSX语法，容易学习
目前，它仅仅是一个用React语法来书写Markdown和PPT的库。为了容易地集成前端各种功能进入markdown和PPT。目前已经实现基本功能：包括
+ 基本markdown元素：标题、段落、列表、链接、图片、文字、分割线、引用、表格
+ 任务项
+ 脚注
+ 公式
+ 高亮代码块
+ 导出PDF
状态处于开发中。目标是 `以React的方式写Markdown，以Markdown的理念写PPT`。未来将集成桌面端软件使之更易于使用。拭目以待吧！
# 示例
参阅 `./example/demo-xxxx.html`。
Markdown列子：
PPT例子：
# 快速入门
STEP1: 新建一个空的html文件
```html
```
STEP2: 引入主题css文件和js文件
```html
```
STEP3: 根据要求根据React JSX格式书写内容。
```html
```
然后启动浏览看看效果吧！
上诉例子中使用`vue`主题。下面是目前所有可用的主题样式：
+ Vue: [https://reactdown.xue1.top/theme/vue.css](https://reactdown.xue1.top/theme/vue.css)
+ Vue-dark: [https://reactdown.xue1.top/theme/vue-dark.css](https://reactdown.xue1.top/theme/vue-dark.css)
+ Github: [https://reactdown.xue1.top/theme/github.css](https://reactdown.xue1.top/theme/github.css)
+ Apollo: [https://reactdown.xue1.top/theme/apollo.css](https://reactdown.xue1.top/theme/apollo.css)
# 开发环镜
vscode
# 安装依赖
```shell
npm install
```
# 开发或运行
```shell
npm run start
```
# 构建
```shell
npm run build
```
# TODOs
+ [x] 支持更换Markdown样式
+ [x] 支持定义模板
+ [ ] 支持其它组件：待定
+ [ ] PPT 脚注
+ [ ] PPT 块
+ [ ] 拆线图、散点图、饼图
+ [ ] ......
# QA
Q：如何自定义模板？
A：参考: `./examples/demo-ucas.html`
Q：如何输出PDF？
A：使用Chrome浏览器打印功能，打印后就是pdf文件。