Color Blocks

Add colorful comment ranges that span multiple lines. This makes it easier to understand what lines a comment refers to and can thus be used to group and organize your code. It also makes it easier for you to find your way in long spaghetti code.

Features & Settings

Syntax

This extension will look for curly brackets inside comments containing at least a hex color argument. Example:

# MyColorBlock {#f9e, 4}
|       |         |   |
|       |         |   |-> number of lines (optional)
|       |         |
|       |         |-> hex color 3 or 6 characters
|       |
|       |-> text annotation
|
|-> comment character (here for Python)

Sample usage

Color blocks work with both line comments and block comments. All lines in the comment will be part of the color block. If no number is specified after the hex color argument, then the color range will also capture any lines until an empty line.

Three different ways to add color blocks.

• Manually
  By typing # MyColorBlock {#f9e, 4} for example.

• Snippet
  By start writing color block and selecting it from the context menu suggestions.

• Command By pressing CTRL+C CTRL+B in succession (similar to the default command for toggling line comments).

  Alternatively by selecting "Add Color Block" from the command palette (CTRL+SHIFT+P).

Note: The above video is slightly outdated.

Wrapping

Note: The above video is slightly outdated.

Styling

Note: The above video is slightly outdated.

Inspired by

• Better Comments
• Blockman
• HiLight

GIFs were produced using Gifski.