Marp-CLI 实现激光指针功能的两种方案

在演示场景中，激光指针是一个很实用的功能，它可以帮助演讲者更好地引导观众注意力。本文将介绍在 Marp-CLI 项目中实现激光指针效果的两种技术方案。

方案一：直接修改 CSS

最简单的方式是通过在 Markdown 文件中直接添加 CSS 样式来修改光标样式：

<style>
section, section * {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16" width="16" viewBox="0 0 10 10" %3E%3Ccircle cx="5" cy="5" r="5" fill="red"/%3E%3C/svg%3E '), pointer;
}
</style>

这段代码使用了内联 SVG 创建了一个红色圆形光标，将其应用于所有幻灯片元素。这种方法的优点是：

1. 无需额外配置
2. 实现简单直接
3. 适用于单次演示场景

方案二：开发 Marp 插件

对于需要重复使用或团队共享的场景，可以开发一个 Marp 插件：

// engine.mjs
const laserPointerStyle = `
section, section * {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16" width="16" viewBox="0 0 10 10" %3E%3Ccircle cx="5" cy="5" r="5" fill="red"/%3E%3C/svg%3E '), pointer;
}`

export const laserPointerPlugin = ({ marpit }) => {
  const { renderStyle } = marpit

  marpit.renderStyle = function (...args) {
    this.lastStyles = [...(this.lastStyles ?? []), laserPointerStyle]
    return renderStyle.apply(this, args)
  }
}

export default ({ marp }) => marp.use(laserPointerPlugin)

使用时通过以下命令启动：

marp --engine ./engine.mjs -s .

插件方案的优势在于：

1. 可复用性强
2. 便于团队共享
3. 可以与其他功能组合使用

技术实现原理

两种方案的核心都是通过 CSS 的 cursor 属性修改光标样式：

1. 使用 data URI 内嵌 SVG 图像
2. 定义了一个红色圆形作为指针
3. 应用范围覆盖整个幻灯片区域

进阶思考

虽然当前方案已经能满足基本需求，但更高级的实现可以考虑：

1. 指针颜色自定义
2. 指针大小调整
3. 只在特定模式下启用指针

不过需要注意的是，Marp 团队目前没有计划增强现有的演讲者视图功能，以保持实现的简洁性。如果需要更复杂的演示控制功能，建议考虑将 Marp Core 与其他专业演示工具集成。

总结

本文介绍了在 Marp-CLI 中实现激光指针功能的两种方法，从简单的 CSS 修改到完整的插件开发，开发者可以根据实际需求选择合适的方案。这种功能增强展示了 Marp 生态系统的灵活性，能够通过简单的技术手段满足特定的演示需求。