【Code Slides】 Code Slides are here!

While preparing for the internal share, I thought that there was so much code logic in Vue (my share was titled “Vue Visual DOM & Diff”) that much of it was not what I wanted the audience to see. How could I get the audience to focus on “what part of the code I’m talking about”? Sure, I could have sorted out all the core code that I wanted to share, which would have partially solved the problem, but I would have to take an audience to see the source code eventually. With this requirement, a search of the vscode plug-in library failed to find a suitable plug-in. So we decided to write one of our own.

What can Code Slides do

• 🔥 Capture your selected code snippets and highlight them, calledA slide
• 🎉 can be createdprojectTo keep a series ofslides
• 🎆 demonstrate your choiceprojectIncluded in theslidesPlay,slidewhenAutomatically opens the corresponding file and locates the code snippet recorded in Slide to highlight
• 🎨 eachprojecttheslideIt doesn’t have to be in the same warehouse/directory, you canRecord the code snippets you need to highlight across repositories/directories
• ⚡ is provided in vscodeSide BarUsed to manageprojectsandslides
• 🔧 providesStatus BarUsed to indicateCode SlidesCurrent working mode or playback progress
• 📺 useshortcutsTo control the start and stop of the presentation, andslideThe switch of

Basic usage

1. Open in vscode Side BarCode SlidesThe corresponding one
2. Create project (project)
3. Add one to the projectslide, on the project nodeAdd iconThis is for a new oneslide“, but it doesn’t record the code snippet to highlight yet, so you need to go to Step 4
4. Select the code snippet in a file that you want to highlight and click the Save buttonslideIt’s created and recorded
5. Start demonstrating the logic of your code and amaze them 🤯

Configuration parameters

Code Slides has some configuration options that you can customize, especially when dealing with weird vscode themes, where the default configuration doesn’t help. Here are the default configurations:

{
  "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"
}
Copy the code

Code – Slides. HighlightMode: Highlights mode for the demo. This value can be one of three: “strengthening Unhighlight Line”,” strengthening Line”, or “Both”. This configuration needs to cooperate with the following “lineWeakenRenderOptions” and “lineStrengthenRenderOptions” used together.

Code – slides TAB. LineWeakenRenderOptions: used to weaken the code snippet you don’t want to highlight to show to the audience (it’s the format of the reference VSCode decoration render options)

Code – slides TAB. LineStrengthenRenderOptions: to strengthen you want to show to the audience the code snippet highlighting (it’s the format of the reference VSCode decoration render options)

Code-slides. HideStatusBar: Whether to hide Code slides in the status bar of VSCode (not recommended)

Code – slides TAB. StatusBarNormalColor: status bar font color of the demo mode

Code – slides TAB. StatusBarPlayingColor: demonstrates the status bar font color mode

shortcuts

Quickness allows you to quickly trigger some of the plugin features, especially for slide switching during the demo, which you can catch!

Features Coming soon

The plug-in was completed in a hurry, and there are still many ideas that have not been realized, which will be gradually added later. The following are some functions that are ready to be done in the near future:

1. The code recorded by Slide is converted into screenshots

With all the code options selected, it was natural to generate screenshots. This function has been established at the beginning of the idea of the plug-in, has been given to my girlfriend to complete, I will urge her for everyone. 😏 😏 😏

2. Add a "Presenter mode" when the project is in play mode.

In addition to the code highlighted in slide, the speaker can also select other code to highlight to the audience during the presentation to better illustrate the logic of the code.

👏👏👏 That’s all for this time. Welcome to git repository of star plugin, and look forward to your issues and contribute!

Code Slides Github repository

Code Slides Visual Studio Marketplace