vue-mark-slide

基于 Markdown 语法的开箱即用的幻灯片书写工具

based on vue-mark-display

特性

• 开箱即用
• 基于 Markdown , 并且扩展了一些语法
• 支持代码语法高亮
• 支持移动端（touch controls）
• 可配置

基本用法

npm install -g vue-mark-slide

echo '# Hello World' > ppt.md

vslide run ppt.md

markdown文件示例

• 使用 ---- 作为页面的分隔符
• 可以使用 <!-- --> 在每页插入自定义样式 ( 目前支持6种属性 background , backgroundColor , backgroundImage , color , style , stageBackground )

// ppt.md

# Hello World   // page 1

----

<!-- color: red -->
<!-- style: font-size: 12px; font-weight: bold -->

some content    // page 2

----

you can insert html directly    // page 3

<div class="text"> hello </div>

<style>
    .text {
        color: red;
    }
</style>

进阶

引入图片

如果想要在 md 文件中引入静态资源，例如图片。我们约定静态资源的文件夹名称为 assets 。

总体目录结构应该如下

pptDir
├── ppt.md
└── assets
    └── test.png

然后，在 ppt.md 文件中这样使用，注意请使用相对路径

![img](./assets/test.png)

扩展 markdown

在目录中新增 vslide.config.js

pptDir
├── vslide.config.js
├── ppt.md
└── assets
    └── test.png

在 vslide.config.js 中添加如下代码

// vslide.config.js
module.exports = {
    markdown: (marked) => {
        // do something for marked
    }
}

项目使用 marked 进行解析，你可以在对应函数中对传入的 marked 实例进行操作

自定义过渡动画

vslide 本质上是一个基于 vue 的单页应用，所以其过渡动画也是基于 vue 的 transition 。

所以你可以在 markdown 文件中，插入对应的 style 标签，覆盖 css 类名来达到自定义动画的效果

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: all 0.3s;
}
.slide-enter {
  opacity: 0;
}
.slide-leave-to {
  opacity: 0;
}

vslide.config.js 选项

| 属性 | 用途 | 类型 / 默认值 | | ---- | ---- | ---- | | src | 给定一个远程的markdown链接，可直接加载该文件 | string / '' | | page | 初始加载的页面 | number / 1 | | baseUrl | 设置 html 标签<base />的href属性, 为页面上的所有链接规定默认地址或默认目标 | string / '' | | autoBaseUrl | 是否默认把 src 作为 baseUrl | boolean / true | | autoBlankTarget | 点击链接时是否默认打开空页面 | boolean / true | | autoFontSize | 是否自动设置字体大小 | boolean / true | | supportPreview | 是否开启URL链接预览功能（altKey + 点击） | boolean / true | | urlHashCtrl | 当页面改变，是否更新 URL hash | boolean / true | | markdown | 给定一个远程的markdown链接，可加载该文件 | function / null |

更多细节和语法

参见 vue-mark-display