Published on

Markdown 写 PPT 是如何实现的?

Authors
  • avatar
    作者
    狂奔滴小马

前言

Markdown 是一种轻量的标记语言,我们只需要写 md 格式文件,不必考虑文档的排版,被广泛用于博客写作,技术文档编写等,程序员们都热爱,但我们工作中除了写文档,有时候还需要汇报工作,技术分享等,需要用到 PPT,但设计 PPT 可能不是每个程序员所喜欢的,所以我们可以使用一个非常好用的工具 slidev, 可以使用 markdown 来制作演示文稿, 这个工具很多小伙伴都知道,尤大的分享就经常使用,其他类似的工具还有 Nodepptmarp 等,那么这类工具是如何实现的?

使用

以 slidev 为例,我们只需要使用---分割,就可以将文档分为一页一页的幻灯片。

---
background: https://sli.dev/demo-cover.png
---

# 欢迎使用 Slidev!

为开发者打造的演示文稿工具

---

# 第二页

- 📄 在单一 Markdown 文件中编写幻灯片
- 🌈 主题,代码高亮,可交互的组件,等等
- 😎 阅读文档了解更多!

slidev 演示

实现

markdown 解析

常用的 javascript markdown 解析器有 markdown-itmarkedremark。其中 gatsbyjsgitbook 使用的是 remark 来解析,而 Slidev 和 VuePress 就是使用 markdown-it 解析。 近一年npm 下载量

比如有下面这样一个 md 文件

# 欢迎使用 Slidev!

为开发者打造的演示文稿工具

---

# 第二页

- 📄 在单一 Markdown 文件中编写幻灯片
- 🌈 主题,代码高亮,可交互的组件,等等
- 😎 阅读文档了解更多!

为了能在单一 Markdown 文件中编写幻灯片,我们可以将 md 字符串根据---拆分,拆分后的每段使用 markdown-it 来解析,然后将解析好的 HTML 丢回 section 元素里,并且给 section 设置幻灯片的样式就可以实现简单的效果。

最简单的代码如下

import React from 'react'
import ReactDOM from 'react-dom'
import markdownit from 'markdown-it'

const markdown = new markdownit()

const md = '...'

const slides = md.split('---')

function SlideItem({ item }) {
  return (
    <section className="slidev-layout cover">
      <div className="my-auto">
        <div
          dangerouslySetInnerHTML={{
            __html: markdown.render(item),
          }}
        ></div>
      </div>
    </section>
  )
}

function App() {
  return (
    <div className="app">
      {slides.map((item, index) => (
        <section key={index} className="slidev-content">
          <SlideItem item={item} />
        </section>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

代码片段

幻灯片样式

markdown 只能解析成文档格式,但 PPT 的样式是多样的,可以设置背景、可以设置布局等,所以需要给 md 文件设置更多的字段,在文档最前面三点划线之间书写的有效的 YAML,称为 Front Matter,Front Matter 可以给 markdown 设置更多字段属性。

---
background: https://sli.dev/demo-cover.png
class: text-white
---

# Slidev

This is the center page.

---

layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080

---

# Page 2

This is a page with a image on the right.

所以得实现一个解析器将 md 文件解析成 json 格式

// 解析 yml,这里只支持一层
function parseMatter(code) {
  let data = {}
  const lines = code.split('\n')
  for (let index = 0; index < lines.length; index++) {
    const item = lines[index]
    const arr = item.split(': ')
    if (arr.length === 2) data[arr[0].trim()] = arr[1].trim()
  }
  return data
}
// 解析成 Front Matter 和 content
function matter(code) {
  let data = {}
  const content = code.replace(/---\r?\n([\s\S]*?)---/, (_, d) => {
    data = parseMatter(d)
    return ''
  })
  return { data, content: content.trim() }
}
// 解析 md 格式为 json
function parse(md) {
  const slides = []

  const lines = md.split('\n')

  let start = 0

  function slice(end) {
    if (start === end) {
      return
    }
    const raw = lines.slice(start, end).join('\n')
    slides.push({
      ...matter(raw),
      raw,
    })
    start = end + 1
  }
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i].trimEnd()
    if (line.match(/^---+/)) {
      slice(i)
      const next = lines[i + 1]
      //  跳过一次 `---`, 找下一个
      if (line.match(/^---([^-].*)?$/) && !next?.match(/^\s*$/)) {
        start = i
        for (i += 1; i < lines.length; i++) {
          if (lines[i].trimEnd().match(/^---$/)) break
        }
      }
    }
  }
  if (start <= lines.length - 1) slice(lines.length)
  return slides
}

上面的解析代码只是简易实现,yaml 格式只支持一层,具体大家可以参考 @slidev/paser

经过解析后我们可以获得如下 json

;[
  {
    data: {
      background: 'https://sli.dev/demo-cover.png',
      class: 'text-white',
    },
    content: '# Slidev\n\nThis is the center page.',
  },
  {
    data: {
      layout: 'image-right',
      image: 'https://source.unsplash.com/collection/94734566/1920x1080',
    },
    content: '# Page 2\n\nThis is a page with a image on the right.',
  },
]

有了 JSON 数据,我们就可以给 section 设置样式排版了

const layout = {
  default: DefaultSlideItem,
  'image-right': ImageRight,
}

function App() {
  return (
    <div className="app">
      {slides.map((item, index) => {
        const Slide = layout[item.data.layout || 'default']
        return <Slide item={item} key={index} />
      })}
    </div>
  )
}

可以根据 layout 字段渲染不同的模板

以下代码是 ImageRight 模板的代码

function ImageRight({ item }) {
  return (
    <section className="slide-content grid grid-cols-2">
      <SlideItem item={item} />
      <div
        className="h-full w-full"
        style={{
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: 'cover',
          backgroundImage: item.data.image ? `url(${item.data.image})` : '',
        }}
      ></div>
    </section>
  )
}

那么我们只需要给 layout 字段扩展不同的渲染模板,就可以实现丰富的幻灯片样式了。

代码片段

键盘控制

接下来我们要实现键盘控制,很简单只需要在 useEffect 中监听 keydown 事件控制当前页面,就可以实现翻页效果了。

function App() {
  const [current, setCurrent] = React.useState(0)
  React.useEffect(() => {
    const handleKeydown = (e) => {
      e.preventDefault()
      if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {
        if (current < slides.length - 1) {
          setCurrent((prev) => prev + 1)
        }
      }
      if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {
        if (current > 0) {
          setCurrent((prev) => prev - 1)
        }
      }
    }
    document.addEventListener('keydown', handleKeydown)
    return () => {
      document.removeEventListener('keydown', handleKeydown)
    }
  }, [current])
  return (
    <div className="app">
      {slides.map((item, index) => {
        const Slide = layout[item.data.layout || 'default']
        return (
          <Slide
            style={{
              display: current === index ? '' : 'none',
            }}
            item={item}
            key={index}
          />
        )
      })}
    </div>
  )
}

代码片段

代码高亮

入在 PPT 中要实现代码块的高亮,排版很麻烦,在 sildev 中实现代码块高亮却很方便,接下来我们就实现下代码块高亮的效果。

主要借助于prismjs 这个插件,可以参考之前写的这篇文章《使用 Prism.js 对代码进行语法高亮》

import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
useEffect(() => {
  Prism.highlightAll()
}, [])

上面代码方法是在客户端渲染的,若要部署到线上,可以我们配合 markdown-it 实现在服务端代码高亮。

import Markdown from 'markdown-it'
import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'

const markdown = new Markdown({
  highlight: function (code, lang) {
    const html = Prism.highlight(code, Prism.languages.javascript)
    return `<pre class="language-${lang}">${html}</pre>`
  },
})

代码片段

小结

最后我们通过一个码上掘金在线运行例子来总结下本文的内容

代码片段

以上代码片段只实现了一个雏形,但 slidev 还有更强大的功能, 比如:演讲者录制、演讲者模型、绘图批注等,感兴趣的同学移步 slidev 官网和 Github。

如果对你有帮助,可以随手点个赞,这对我真的很重要。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

runjs-cool
关注微信公众号,获取最新原创文章(首发)View on GitHub