在准备公司内部分享时，我想到一个问题，vue里的代码逻辑太多（我的分享题为「vue visual dom & diff」），很多都不是我想要给听众看的，我怎样才能让听众聚焦在「我讲的那部分代码呢」。诚然，我可以把需要分享的核心代码都单独整理出来，这样的确可以部分解决这个问题，但，我终究会需要带着听众去看源码的。带着这样的需求在vscode插件库一通查找也没有发现合适的插件。于是，咱决定自己写一个。
Code Slides可以干什么
- 🔥 捕捉你选择的代码片段并且高亮它们，称之为
一个slide - 🎉 可以新建
project（项目）来保存一系列的slides - 🎆 演示你选择的
project中包含的slides，播放slide时自动打开对应文件并定位到slide中记录的代码片段高亮显示 - 🎨 每个
project的slide并不一定要同一个仓库/目录下，你可以跨仓库/目录记录你需要高亮的代码片段 - ⚡ 在vscode中提供了
Side Bar用来管理projects和slides - 🔧 提供了
Status Bar用来指示Code Slides当前的工作模式或播放进度 - 📺 使用快捷键来控制演示的开始和停止，以及
slide的切换
基本用法
- 在vscode Side Bar中打开
Code Slides对应的那个 - 创建项目（
project） - 给项目添加一个
slide，项目节点上的添加icon，这是对新建一个slide，但是其中还没有记录需要高亮的代码片段，你还需要进行步骤4 - 选择一个文件中你想高亮的代码片段，并点击保存按钮，这样一个
slide就创建并记录完成了 - 开始演示你的代码逻辑，并震惊🤯他们一脸吧
配置参数
Code Slides 有些配置项可以让你自定义，尤其是面对千奇百怪的vscode主题时，默认配置实在无能为力。以下是默认配置：
{
"code-slides.highlightMode": "Weaken Unhighliht Line",
"code-slides.lineWeakenRenderOptions": {
"opacity": "0.2"
},
"code-slides.lineStrengthenRenderOptions": {
"backgroundColor": "rgba(255, 0, 0, 0.5)"
},
"code-slides.hideStatusBar": "false",
"code-slides.statusBarNormalColor": "#fff",
"code-slides.statusBarPlayingColor": "#0f0"
}
code-slides.highlightMode: 演示的高亮模式。可以是以下三个值中的一个："Weaken Unhighlight Line", "Strengthen Highlight Line", "Both"。这个配置需要配合下面的"lineWeakenRenderOptions"和 "lineStrengthenRenderOptions"一起使用。
code-slides.lineWeakenRenderOptions: 用来弱化你不想高亮展示给听众的代码片段（它的格式参考VSCode decoration render options）
code-slides.lineStrengthenRenderOptions: 用来强化你想高亮展示给听众的代码片段（它的格式参考VSCode decoration render options）
code-slides.hideStatusBar: 是否隐藏Code Slides在vscode的状态栏（不推荐关闭）
code-slides.statusBarNormalColor: 非演示模式的状态栏字体颜色
code-slides.statusBarPlayingColor: 演示模式的状态栏字体颜色
快捷键
快捷让你能够快速地触发一些插件功能，尤其是演示的时候用来切换slide，这个你可以把握住！
| Name | Description | Windows Platform | MacOS Platform |
|---|---|---|---|
| code-slides.addProject | 新建项目 | alt+ctrl+n | option+cmd+n |
| code-slides.addSlideStart | 给某项目添加slide | alt+ctrl+a | option+cmd+a |
| code-slides.playProjectFromStart | 播放当前聚焦的项目 | alt+ctrl+c | option+cmd+c |
| code-slides.stopPlayProject | 停止播放 | alt+ctrl+c | option+cmd+c |
| code-slides.showPreSlide | 切换到上一个slide | alt+ctrl+left | option+cmd+left |
| code-slides.showNextSlide | 切换到下一个slide | alt+ctrl+right | option+cmd+right |
Features Coming soon
插件完成的比较匆忙，还有很多想法没有来的及实现，之后再慢慢补上，以下呢就是部分近期准备做的功能：
1. slide记录的代码转化成截图
代码选都选了，生成截图也是很自然的想法。本功能在插件设想之初就已确立，已交由女票去完成，我会替大家去督促她的。😏😏😏
2. 项目处于播放模式下，增加一个「演示者模式」
这个主要是让讲者在演示的时候，除了slide中高亮的代码，也能选择其他的代码突出显示给听众，更好地阐述代码逻辑。
👏👏👏 以上就是本次内容的全部了，欢迎大家去star本插件的git仓库呀，也期待大家的issues和contribute！
