vue-mark-display 使用教程

1. 项目介绍

vue-mark-display 是一个基于 Vue 组件的 Markdown 幻灯片生成工具。它允许用户使用 Markdown 语法轻松撰写幻灯片，并在浏览器中播放和控制。该项目由 Jinjiang 开发，已经开源并持续维护多年。

主要特点：

• Markdown 支持：使用标准的 Markdown 语法撰写幻灯片。
• 自定义样式：通过 HTML 注释扩展 Markdown 语法，实现每页幻灯片的特殊样式设置。
• 键盘控制：支持键盘快捷键（如左右箭头、Enter 键、Ctrl+G）进行翻页。
• URL Hash 控制：自动将当前页码与网页的 URL hash 对应。
• 触摸屏支持：利用第三方手势库支持触摸屏的左右滑动翻页。
• PDF 导出：支持将幻灯片导出为 PDF 格式，方便分享和传播。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 vue-mark-display：

npm install vue-mark-display

使用

在你的 Vue 项目中引入并使用 vue-mark-display 组件：

<template>
  <mark-display :markdown="markdown" @title="setTitle" keyboard-ctrl url-hash-ctrl auto-font-size auto-blank-target></mark-display>
</template>

<script>
import MarkDisplay from "vue-mark-display";

const markdown = `
# Hello World
----
This is Vue Mark Display
`;

export default {
  components: {
    MarkDisplay
  },
  data() {
    return {
      markdown
    };
  },
  methods: {
    setTitle(title) {
      document.title = title;
    }
  }
};
</script>

<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

运行

启动你的 Vue 项目，打开浏览器即可看到生成的幻灯片。

3. 应用案例和最佳实践

案例一：技术分享

在技术分享会上，使用 vue-mark-display 可以快速制作出结构清晰、内容丰富的幻灯片。通过 Markdown 语法，可以轻松添加代码块、列表、图片等内容，使演示更加生动。

案例二：在线培训

在线培训课程中，vue-mark-display 可以帮助讲师快速准备课程材料。通过自定义样式和 PDF 导出功能，讲师可以轻松调整幻灯片样式，并将其分享给学员。

最佳实践

• 样式统一：为幻灯片设置一套全局的 CSS 样式，确保每页幻灯片的风格一致。
• 内容简洁：避免在幻灯片中添加过多文字，保持内容简洁明了，重点突出。
• 互动性：利用键盘控制和触摸屏支持，增强演示的互动性，提升观众体验。

4. 典型生态项目

Slidev

Slidev 是一个类似的项目，也是一个基于 Vue 的幻灯片生成工具。它提供了更多的自定义选项和插件支持，适合需要高度定制化的用户。

Reveal.js

Reveal.js 是一个基于 HTML 的幻灯片框架，支持多种插件和主题。虽然不是基于 Vue，但它提供了丰富的功能和灵活的定制选项。

Marp

Marp 是一个基于 Markdown 的幻灯片工具，支持导出为 PDF 和 HTML。它提供了简洁的语法和强大的导出功能，适合快速制作幻灯片。

通过这些生态项目，用户可以根据自己的需求选择最适合的工具，进一步提升幻灯片制作的效率和质量。