slider-doc

Make html element to be slider view

Usage no npm install needed!

<script type="module">
  import sliderDoc from 'https://cdn.skypack.dev/slider-doc';
</script>

README

slider-doc

Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

Make html element to be slider view

一建转换文档为 PPT 演示

在线 DEMO

快捷键列表:

  • ESC / O : 打开整体预览模式
  • Cmd + ESC / Ctrl + ESC: 退出 PPT 模式
  • 方向键:PPT 翻页

原理

image.png

解析 DOM 树,生成树结构如下:

<h1>标题</h1>
<p>内容</p>
<h2>标题2</h2>
<p>内容2</p>

会解析成

{
  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

import sliderDoc from 'slider-doc'

const silder = sliderDoc({
  lvl0: '.doc h1',
  lvl1: '.doc h2',
  lvl2: '.doc h3',
  lvl3: '.doc h4',
  lvl4: '.doc h5'
})

API

sliderDoc(selectors, options?)

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:

    ;[
      (vNode, ctx, next) => {
        if (vNode.type === 'text') {
          return `<span>${vNode.value}</span>`
        }
        return next()
      }
    ]
    
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 or git 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)' or git 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 🐟