我如何使用 VS Code 代替 Keynote 或 Powerpoint 进行演讲

本文最初发表在我的个人博客上。
我将其重新发布在这里，供 DEV 社区使用。

上周，我在保加利亚 PHP 2019 大会上发表了演讲。在收到大量反馈后，一些人问我关于那次演讲的“原始表达方式”。确实，我没有使用常规的演示工具，而是用我的代码编辑器 Visual Studio Code 完成了所有演示。

以下是我这样做的原因和方法，这样我就可以直接参考，无需重复解释。希望它能激励你也这样做。我真的认为这是一种非常有效的技术讲座形式。

TL;DR 我制作了一个 VS Code 扩展来帮助您执行相同的操作。👉
它被称为 Slides。

VS Code 作为演示工具。但是，为什么呢？

嗯，我从Kent C. Dodds 关于“管理开源项目”的演讲中得到了启发。我读了André Staltz 的原博文，非常喜欢。我推荐你读一下，以下是我的总结：

• 技术演讲真正重要的是内容。使用代码编辑器确实能帮助你专注于重要的事情。你不需要花哨的动画，你只需要传递内容。
• 当你用代码解释技术概念时，最好能用实际操作来演示。从空白文件开始实时编写代码。向人们展示你所说的方法确实有效，而不是什么黑魔法。
• 它能帮助人们理解你的信息。感觉就像你在向同事展示如何做某事一样。
• 如果您想展示代码，最好留在代码编辑器中，而不是从演示工具切换。
• 如果需要，您仍然可以显示图像。

我的演讲主题是“六边形架构的秘密”。我希望大家能够理解，无论使用哪种语言、架构或工具，可维护代码库背后那条普遍适用的公理是什么。因此，我希望展示代码。我需要用具体、可行的例子来阐述这个理论。

这就是为什么我决定只使用 VS Code 进行演示。效果真的很棒！

一路走来，我学到了一些东西。如果你也想这样做，我想分享一下会很有帮助😉

如何使用 VS Code 制作精彩的演示文稿

抛开理论不谈，以下是我仅使用 VS Code 构建精彩演讲的秘诀：

1. Markdown 文件中的原始内容
2. 通过图表和绘图丰富内容
3. 从可执行的空白文件进行实时编码
4. 使用不太花哨的终端来提高清晰度
5. 让实时编码更顺畅
6. 不要在整个演讲过程中一直坐在电脑前，使用答题器

Markdown 文件中的原始内容

专注于内容。用纯 Markdown 编写内容。展示出来。

为了让您的（精彩）内容能够舒适地显示，最好对 VS Code 进行适当的配置。根据 André Staltz 的建议，您最好：

• 使用浅色主题。对比度越高越好，这样无论房间多暗，人们都能看书。
• 使用足够大的字体，以便任何人都可以从房间的后面阅读。
• 摆脱干扰。隐藏侧边栏和所有内容。只显示文件内容。

通过图表和绘图丰富内容

我讲了六边形架构。用一些图表更容易理解这个理论。在这种情况下，我不想再用 ASCII 艺术来碰运气了。

我在其他地方画图（可以是 Keynote，随便什么），然后导出一张图片。VS Code 会显示这张图片——所以它就像一张幻灯片一样。

为了这次演讲，我甚至决定用手绘来解释我所说的一切。不过，这很私人，而且是专门为这次演讲设计的。这也是因为我之前准备了这次演讲的幻灯片🤓

从可执行的空白文件进行实时编码

我按字母顺序命名文件。为了方便起见，我使用计数器作为前缀。所以我会这样写01.md：02.md，，，03.jpg等等。

当我需要实时编码时，我会放一个空文件来保存代码。例如04.php或04.js。

最好将文件留空。如果文件里有内容，最好是观众已经知道的内容。

由于它只是代码编辑器中的一个普通文件，所以我之后可以从终端运行它。无需任何黑魔法！

使用不太花哨的终端来提高清晰度

说到终端，我们开发者可能会非常花哨。我敢打赌你的终端肯定跟我的不一样。我们都会根据自己的特定需求和个人风格调整工具。没关系！

然而，这可能会在演讲过程中分散注意力。我不希望大家去想我的 git 别名或 shell 主题。我希望他们专注于演讲内容。

因此，我建议在演示过程中不要使用那些花哨的东西。一个基本的 bash shell 就足够了，不会让任何人感到惊讶。

我也更喜欢使用 VS Code 嵌入式终端，所以我会继续使用我的代码编辑器——这就是我最终不使用 Keynote 的原因。这样，我就可以将其配置为使用我终端的简单版本，而无需更改我每天使用的终端！

让实时编码更顺畅

现场编程是一种风险很大的演示形式，尤其当你不习惯的时候。要想在观众面前自信地编程，同时又不让演讲显得有趣，需要大量的练习。

你会因为压力太大而打错字。你会因为大家都在看着你而忘记一些基本的东西。但最重要的是，当你开始写代码时，你可能会切断与读者的联系。原因有两个：

1. 你不再看他们，而是盯着电脑。这样做就切断了与他人的视觉联系。视觉联系对于演讲至关重要。偶尔中断一下也无妨，只要你同时保持与他人的对话即可。问题是……
2. 你也不再说话了。至少，你的思路慢了不少。脑子里全是“嗯嗯嗯嗯”的声音，因为你在思考要写的代码，根本没法集中精力说话。

当你看着电脑，试图记住下一步要输入什么，却不说出有意义的信息时，人们就会感到无聊并断开连接。

这就是为什么需要练习。这样你才能在编程时保持演讲的深度。或者，你可以在打字时看着你的听众。不要低估一场像样的现场编程需要多少准备！在众人面前编程，并且让其变得有趣，真的很难。

因此，您有两个选择：

1. 练习、练习、在人们面前练习，直到你足够自如。
2. 使用VS Code Hacker Typer 扩展。它允许你提前录制实时编码，并在实时回放。

但这已经不是实时编码了！还有什么意义呢？那为什么不直接在幻灯片里展示代码呢？

主要的区别在于交付方式。

在我的演讲中，我希望大家能够在代码编辑器中看到正在编写的代码，从一个空白文件开始。代码写好后，我可以运行它。我认为这最有利于理解。

我的打字技巧对与会者来说不那么重要了。当我回放保存的宏时，我可以专注于演讲，并与听众保持联系。我讲的内容更有趣，也与人们在屏幕上看到的内容更相关。

当然，为了顺利完成，仍然需要准备和练习。

你可能不喜欢这个想法，没关系。我认为重要的是演讲的内容和表达方式。这确实有助于向人们传递精彩的内容。

不要在整个演讲过程中一直坐在电脑前，使用答题器

我告诉过你与观众互动对于使演讲有趣是多么重要。

写代码的时候，你只能坐在电脑前。这没关系。但是不写代码的时候，最好能走出来，离观众更近一些。别再躲在电脑后面了，站到电脑后面。和你的观众互动。

为此，您应该能够“远程”切换幻灯片。如果您不必每隔一分钟就回到电脑前切换下一张幻灯片，操作会更顺畅。这就是点击器的用途！

但是如何在 VS Code 中使用点击器呢？我的意思是，“幻灯片”实际上是在不同选项卡中打开的文件。那么你的点击器如何让 VS Code 跳转到下一个选项卡呢？

答案几乎就在问题里。为此，你需要做两件事：

1. 在 VS Code 中定义一个快捷方式，用于移动到下一个选项卡。命令为workbench.action.nextEditor，您可以为其配置键盘快捷键。
2. 重新映射您的点击器以匹配您定义的快捷方式。

如何重新映射点击器取决于你的操作系统和点击器。在 MacOS 上，我使用了一个名为Karabiner-Elements的工具来重新映射点击器。我发现这个重新映射无线演示器的教程非常有帮助。

我使用的设置

根据 André Staltz 的建议，以下是我通常使用的设置，以确保前面的几点：

{
  "workbench.colorTheme": "GitHub Clean White",
  "workbench.colorCustomizations": {
    "editorCursor.background": "#ffffff",
    "editorCursor.foreground": "#0000bb",
    "editor.lineHighlightBackground": "#f0f0f0",
    "editor.selectionBackground": "#aaeeff"
  },
  "workbench.statusBar.visible": false,
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,
  "explorer.openEditors.visible": 0,
  "editor.renderWhitespace": "none",
  "editor.renderIndentGuides": false,
  "editor.fontFamily": "SF Mono",
  "terminal.integrated.fontFamily": "SF Mono",
  "editor.fontWeight": "600",
  "editor.fontSize": 24,
  "terminal.integrated.fontWeight": "800",
  "terminal.integrated.fontSize": 28,
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.shell.osx": "/bin/bash",
  "editor.formatOnSave": false,
  "workbench.editor.enablePreview": false
}

我安装了这个GitHub Clean White主题，SF Mono因为它看起来像 GitHub，而且开发者可能已经习惯了这个主题。它比花哨的主题或字体更易读，也更不容易分散注意力。

演讲开始时，我会走到房间后面检查字体大小。我会调整字体大小，以便从后面阅读时感觉更舒服。

使用扩展程序自动执行大部分流程

如果我们回顾一下，在演讲开始时我需要：

• 更新我的 VS Code 设置
• 配置快捷方式，以便我可以在幻灯片之间切换
• 按顺序打开所有文件

演讲结束后，我通常会把它去掉，因为在电脑上准备演讲的时候不太方便。这也就是所谓的“幻灯片”模式。

因为我不想手动来回操作，所以我用一个扩展程序实现了自动化，然后就发布了。这个扩展程序叫做Slides，你可以自己试试。

幻灯片功能让您可以方便地将 VS Code 用作演示工具。您可以切换“幻灯片”模式。它将根据您的演示设置，通过一个快捷方式打开您的幻灯片。它允许您在幻灯片之间导航。最后，完成后您可以退出“幻灯片”模式。

您觉得怎么样？您下次演讲会用 VS Code 吗？如果不用，是什么阻碍了您？