slider-doc
Make html element to be slider view
一建转换文档为 PPT 演示
快捷键列表:
- ESC / O : 打开整体预览模式
- Cmd + ESC / Ctrl + ESC: 退出 PPT 模式
- 方向键:PPT 翻页
原理
解析 DOM 树,生成树结构如下:
标题内容标题2内容2
会解析成
{ type: 'lvl', level: 1, value: '标题', children: [ { type: 'text', value: '内容' }, { type: 'lvl', level: 2, value: '标题2', children: [ { type: 'text', value: '内容2' } ] } ]}
Installation
npm install slider-doc# or use yarn yarn add slider-doc
Usage
const silder =
API
sliderDoc(selectors, options?)
selectors
- Type: Selectors
同时扩展了 code 类型的 text selector,方便展示代码块
{ code: '.post pre'}
options
document
- Type:
Document
- Default:
document
excludes
解析 dom 之前,需要剔除的 element
- Type:
Selector[]
- see Selector - Default:
[]
revealConfig
Reveal.js 的配置
mountContainer
Reveal.js 挂载的节点
- Type:
Element
- Default:
document.body
renderers
自定义渲染
-
Type:
Array<(vNode, ctx, next) => string>
-
Default:
[]
-
Example:
;{if vNodetype === 'text'return `<span></span>`return}
renderSectionAttrs
渲染外层 Section 时候注入的属性
- Type:
(vNode, ctx) => string
- Default:
() => 'data-transition="fade-in slide-out"'
Todo
- Feat: 生成 reveal.js 的 dom 实例,而不是 html,可以带上 dom 交互(如 React 组件)
Contributing
- Fork it!
- Create your new branch:
git checkout -b feature-new
orgit checkout -b fix-which-bug
- Start your magic work now
- Make sure npm test passes
- Commit your changes:
git commit -am 'feat: some description (close #123)'
orgit commit -am 'fix: some description (fix #123)'
- Push to the branch:
git push
- Submit a pull request :)
Authors
This library is written and maintained by imcuttle, imcuttle@163.com.
License
MIT - imcuttle 🐟