Slidev 101教程——用Markdown进行编码演示

DebugUsery
997 阅读9分钟

作为一个开发者的倡导者，我做了很多公开演讲，以分享我的经验并教育其他开发者--这意味着我花了很多时间来构建演讲。这可能是一个乏味的过程，尤其是在考虑配色方案、美学视觉放置和故事情节等细节时。一段时间后，我想找到一种在过程中内置开发者经验的方法。

值得庆幸的是，现在有一种更好、更程序化的方法来构建你的幻灯片--Slidev，这个开源项目可以让你对你的演示文稿进行编码。

幻灯片应用程序与编码的演示文稿

我曾经用Keynote、Google Slides和Slides.com来制作幻灯片，每一种都遇到了一些挑战，比如：

  • Keynote的便携性不强，需要你将幻灯片导出为PDF格式以便分享。
  • 谷歌幻灯片很适合在需要时进行协作编辑，而且Snyk的标准化幻灯片主题有助于使视觉工作不至于成为一种时间沉淀。然而，谷歌幻灯片缺乏文本动画功能，而这些功能对于代码变化的动画效果非常好。谷歌幻灯片的另一个挑战是，你必须 "在线 "才能正常工作--而我们都知道会议Wi-Fi有多慢。
  • Slides.com是建立在开源的Reveal.js项目之上的，由天才的Hakim El Hattab开发。虽然我喜欢这种基于网络的演示服务，因为它很简单，但它缺乏主题，而且我经常超过免费版本的限制（有时也会超过付费版本）。

鉴于上述情况，为你的演示文稿编码的一些优势是：

  • 可以查阅基于代码的版本历史。
  • GitHub的开源性质使得你可以很容易地与他人分享你的幻灯片并进行合作。

用GitHub上的Slidev为你的演示文稿编码

在深入了解Slidev之前，我应该提到，对演示文稿幻灯片进行编码并不是一个新概念。Patrick Debois，也被称为DevOps之父，在他的博文中回顾了这个概念，分析了作为代码的不同概念。Reveal.js和MDX都是已经存在了一段时间的项目的例子。

我们先来介绍一下Slidev和它的背景。Slidev是一个基于Vue.js的开源项目，由Anthony Fu建立。它旨在通过使用Markdown语法作为基础来简化幻灯片的构建过程，同时通过允许用户构建自己的组件来扩展现有的功能集。

开始时，在一个新的文件夹中启动一个Slidev项目。

npm init slidev

它将提示你几个关于幻灯片标题、文件夹名称和其他细节的问题。一旦完成，它就会用一个简单的组件例子为项目搭建脚手架，以及一个主文件slides.md --其中包含整个幻灯片。

文件夹结构和幻灯片文件看起来应该是这样的。

Slidev project structure

注意到slides.md 文件的内容。

  • 这个markdown文件由YAML Frontmatter配置组成，允许你定制特定的幻灯片或整个幻灯片，并以开头和结尾的--- 字符表示。
  • Markdown文件上的每个标题将使用# Title heading 1 符号来表示幻灯片的标题和主标题。在这之下是内容。
  • 在幻灯片上的按钮和视觉效果方面的进一步定制，将用HTML代码来注明<div> 和<span> DOM元素。

一旦我们完成了对默认幻灯片的修改，我们就可以用热重载模式运行Slidev项目。

npm run dev

这将自动将内容构建成一个网页，并通过localhost:3030 来提供该内容。它还会打开一个浏览器窗口来渲染内容，如图所示。

Slidev default theme

就编写实际内容而言，它就像编写README标记一样简单，大多数开发人员都非常熟悉。下面是一个子弹列表幻灯片的例子。

---

# What is Slidev?

Slidev is a slide deck maker and presenter designed for developers, and consists of the following features

- 📝 **Text-based** - focus on the content with Markdown, and then style them later
- 🎨 **Themable** - theme can be shared and used with npm packages
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
- 🤹 **Interactive** - embedding Vue components to enhance your expressions
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
- 🛠 **Hackable** - anything possible on a webpage

<br>
<br>

Read more about [Why Slidev?](https://sli.dev/guide/why)

<!--
You can have a `style` tag in markdown to override the style for the current page.
Learn more: https://sli.dev/guide/syntax#embedded-styles
-->

<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>

让我们把这个代码片断分成构成幻灯片的各个部分。

  1. --- 开始一个新的幻灯片页面，并设置该幻灯片所需的任何配置。在这种情况下，不需要对Slidev进行特别的定制。
  2. 用# What is Slidev? 指出的markdown标题设置了相应的幻灯片的标题。
  3. 幻灯片主体紧随标题，并像其他Markdown代码语法一样进行输入。请注意，你可以使用<br> 和emojis或Markdown风格的链接在幻灯片的末尾包括HTML换行。
  4. HTML注释块不会出现在幻灯片中，因为它被保留给演讲者注释。这是一种在内容中捕捉你的想法的好方法!
  5. 内联样式标签用于覆盖主题自己的标题样式（这只是一个简单的白色文本颜色），并应用一个渐变的颜色。

下面是一张该幻灯片布局的截图，是如何呈现的。

A visual representation of Slidev slide code block.

当你花大量时间浏览源代码片段时--就像我在介绍脆弱代码和安全最佳实践的要点时那样--代码高亮是一个很好的功能。

考虑一下下面的Slidev代码。

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

# Code

Use code snippets and get the highlighting directly![^1]

ts {all|2|1-6|9|all}
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">

[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

这张幻灯片从一个特定的定制开始，正如在开头和结尾的--- YAML 块中指定的那样。它设置了布局以在右边显示一张图片，并指定了该图片的URL。

然后，它描述了幻灯片的标题和内容，其中使用了代码高亮。该代码片段对鼠标点击做出反应，并在整个过程中遵循这种动画模式。

  1. 起初，Slidev高亮显示整个代码块，正如打开代码块的ts {all} 指令所表示的那样。
  2. 每一次鼠标点击来推进幻灯片动画，都会高亮显示代码的一个特定部分：第2行，然后是第1至6行，然后是第9行，最后是所有的内容再次高亮显示。
  3. 然后，<arrow> 组件被用来用x和y坐标指向某一行代码（我承认，这有点不友好）。当鼠标第3次点击时，它会被特别触发，正如v-click=”3” 属性所表示的。
  4. 最后，它还包括脚注，这是一种很好的方式来归属图片的功劳或你在整个幻灯片中的引用。

下面的屏幕截图显示了这张幻灯片的运行情况。

我将通过提醒你，由于Slidev建立在Vue.js框架之上，你可以在幻灯片的Markdown语法中直接定义和使用任何Vue组件--包括那些由你导入的主题提供的组件，来结束这个入门指南。

Slidev导出、主题和其他幻灯片功能

我们讨论了如何开始使用Slidev和Markdown。但Slidev还有很多功能，我期待着探索这些功能，作为我公开演讲需求的一部分。以下是我最感兴趣的几个功能。

Slidev的主题和在浅色和深色模式之间的切换

想象一下，你花了那么多时间制作你的幻灯片，却发现会议场所的灯光与你的目标不符。你被迫带着知道大部分内容无法阅读的悲痛去演讲。这很难。

使用Slidev，解决方案很简单。幻灯片工具栏中的黑暗模式切换按钮允许你在浅色模式和深色模式 的主题之间切换，消除了对照明和可读性的担忧。你必须确保你使用的主题有这个功能，但我在Slidev的默认主题以及我使用过的其他几个主题中发现了这个功能。总的来说，很高兴看到主题设计者将其纳入构建中。

Slidev support for dark mode toggle.

在Slidev主题文档页面上已经有了一些精心策划的主题，但你可以在npm注册表中搜索以slidev-theme标签发布的包，以找到更多。

用Slidev轻松实现演示模式

另一个有用的功能是通过浏览一个特定的URL来实现演示者模式。与其他幻灯片应用程序不同的是--演示者模式是内置在演示视图切换中的--使用Slidev，我可以在浏览器中访问演示者模式，通过在移动设备或平板电脑上打开链接来查看我的笔记或下一张幻灯片。

Slidev导出或只是一个在线版本的演示文稿

将Slidev演示文稿导出为PDF或PNG需要通过Playwright进行渲染--这基本上需要对无头浏览器进行屏幕捕捉。

这相当容易，而且远比表面上的要简单，但值得注意的是这是如何工作的。Slidev导出文档页面列出了所有的细节，包括如何在幻灯片的明暗模式之间进行切换，以及点击动画。

然而，我一直在考虑用以下步骤来分享我的Slidev甲板。

  1. 幻灯片被托管在GitHub仓库中。
  2. 每次提交都有一个CI启动，产生一个静态的实时网站，部署到Vercel或Netlify。
  3. 同一个CI也产生Slidev PDF导出，作为构建的一部分，GitHub Actions可以将其作为一个工件来存储。然而，工件只保留90天，所以我们需要另一种方式来处理。一个选择是将生成的PDF文件提交到GitHub仓库。

用Slidev为你的演示文稿编码

这就是所有的人!谢谢你阅读我用Slidev为你的演示文稿编码的旅程。我希望它能启发你考虑类似的途径，或者想出一个更好的方法，来建立可编程的和定制的演示幻灯片。

avatar
文章
阅读
粉丝