Use VSCode Dimmer to Highlight Code when Teaching

Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

The VSCode Dimmer extension is great when you want to show and explain code to someone. It helpfully dims the code that's not relevant to the selected line, making it easier for your audience to focus on what you want them to.

Instructor: [00:01] Install the VS Code dimmer extension from the marketplace. I've got a demo file here we can use to test this new extension.

[00:11] Activate the dimmer by opening up the command palette and searching for ataco dimmer. Now that it's enabled, it'll dim all of the lines except for the current one.

[00:23] This is cool, but we can configure it to be more helpful. First, let's set a key binding so we can activate it via keyboard instead of the command palette. Open the keyboard shortcuts menu. Search for dimmer, and let's add a custom keybinding of Alt D.

[00:47] Back in our demo file, we can test our new keyboard shortcut to toggle the dimmer on and off. We can also change the number of lines that are dimmed as well as the opacity of the dimmed lines. Let's configure these in the settings.

[01:06] We can change the dimmer context value to control the number of lines above and below the current selected line that are not dimmed. Let's set that to two. Let's also change dimmer opacity so that the non-dimmed lines are easier to see.

[01:25] Coming back to our demo file, you can see that the dimmed lines are more transparent and more of the lines surrounding the currently selected line are visible.

~ 2 hours ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today