devpoint.cn

markdown 对于开发者来说是一个熟悉的文档格式，编写文档或者博客首选的格式。markdown 文档可以转换为HTML进行展示。在文章《2021 年 6 个GitHub推荐前端项目》中介绍了一个将 markdown 转换为幻灯片的脚本库 Slidev 。本文将通过一个实例来展示其使用方法，为前端开发提供一种文档展示方式。

官方网站：https://github.com/slidevjs/slidev

DEMO地址：http://slidev.devpoint.cn/1

简介

Slidev 是一款面向前端工程师的演示工具。可以从用 Markdown 编写的文档生成漂亮的幻灯片。下面是官方介绍：

Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。

更多的功能介绍可以参阅 Slidev 官方网站。

对于前端工程师来说，安装一个依赖是家常便饭，运行以下脚本：

npm init slidev@latest

按照提示输入相关信息，安装完成之后会生成一个默认的模板。

使用 Slidev 来构建，设置好了主题，就需要按照工具的约定的语法来构建内容，下面就来主要的 Markdown 语法。

--- 分隔符来分隔幻灯片

下面这部分内容主要是幻灯片的基本信息和配置：

---
# 主题id 或 主题包名称
theme: seriph
# 封面背景图来源
background: ./public/images/main.jpg
# apply any windi css classes to the current slide
class: "text-center"
# Slidev 附带两个语法高亮语法，目前有两种：prism、shiki
highlighter: shiki
# 在代码块中是否显示行号
lineNumbers: false
# 幻灯片的介绍
info: |
    ## Three.js 开启之路
    随着元宇宙开启 WEB3D 之路，带你入门Three.js

    更多信息参阅 [DevPoint](https://www.devpoint.cn)
# 绘图构建导出模式
drawings:
    persist: false
---

幻灯片的介绍内容在左下角的工具栏有个信息按钮，点击可以查看，效果如下：

Slidev 使用 Windi CSS（与 Tailwind CSS 兼容）允许指定网格布局。可以上下左右自由排列内容，因此可以通过充分利用空间来创建幻灯片。

Slidev 会在 Markdown 中语法高亮显示代码块，这样就消除了上述缺点。可以复制和搜索字符串，如果重写 Markdown 代码块，预览也会随之而来。无需准备图像，现在可以专注于写作。

同样可以设置一个只在页面内有效的样式，对单独的页面进行样式定义。

完成所有内容的可以进行构建部署：

npm run build

效果可以参阅 http://slidev.devpoint.cn/1。