【Code Slides】专为code分享打造的利器来了！

在准备公司内部分享时，我想到一个问题，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的切换

基本用法

1. 在vscode Side Bar中打开Code Slides对应的那个
2. 创建项目（project）
3. 给项目添加一个slide，项目节点上的添加icon，这是对新建一个slide，但是其中还没有记录需要高亮的代码片段，你还需要进行步骤4
4. 选择一个文件中你想高亮的代码片段，并点击保存按钮，这样一个slide就创建并记录完成了
5. 开始演示你的代码逻辑，并震惊?他们一脸吧

配置参数

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，这个你可以把握住！

Features Coming soon

插件完成的比较匆忙，还有很多想法没有来的及实现，之后再慢慢补上，以下呢就是部分近期准备做的功能：

1. slide记录的代码转化成截图

代码选都选了，生成截图也是很自然的想法。本功能在插件设想之初就已确立，已交由女票去完成，我会替大家去督促她的。???

2. 项目处于播放模式下，增加一个「演示者模式」

这个主要是让讲者在演示的时候，除了slide中高亮的代码，也能选择其他的代码突出显示给听众，更好地阐述代码逻辑。

??? 以上就是本次内容的全部了，欢迎大家去star本插件的git仓库呀，也期待大家的issues和contribute！

Code Slides Github仓库

Code Slides Visual Studio Marketplace