Region Marker
Region Marker is a VS Code extension that visualizes and manages code regions with colored highlighting. It helps you organize long files by clearly marking blocks of code, supporting nesting, code folding, and custom configuration.
Features
1. Visual Region Highlighting
Automatically highlights regions based on comment markers. You can choose to display the highlight as a border in the editor text or as colored lines in the gutter.
- Start:
// region [Name]
- End:
// endregion
2. Nested Regions & Multi-Color Support
Supports infinite nesting of regions. Visual indicators cycle through a configurable palette of colors to distinguish depth levels.
- Level 1: Color 1 (Default: Blue)
- Level 2: Color 2 (Default: Orange)
- Level 3: Color 3 (Default: Green)
- (And so on, cycling through the palette)
3. Render Modes (Text vs Gutter)
Choose how you want to see the regions:
- Text Mode (Default): Draws a colored border on the left side of the code in the editor.
- Gutter Mode: Draws a colored vertical line in the gutter (next to line numbers), similar to standard folding indicators but colored.
4. Code Folding
Regions defined by the extension are automatically foldable, allowing you to collapse sections of code to focus on what matters.
5. Custom Start/End Phrases
Don't like // region? You can configure the extension to use any custom start and end phrases (regex supported).
- Example:
NOTE: and END NOTE
6. Line Range Highlighting
Manually define static regions by line numbers in your settings, perfect for highlighting specific blocks without adding comments to the code.
Configuration
You can customize the extension in VS Code Settings (Ctrl+,) or settings.json.
| Setting |
Description |
Default |
regionMarker.renderMode |
Choose rendering style: "text" or "gutter". |
"text" |
regionMarker.colors |
Array of colors to use for nested regions. |
["#007acc", "#ffa500", "#008000"] |
regionMarker.startRegex |
Regex pattern for the start of a region. |
//\\s*region\\b |
regionMarker.endRegex |
Regex pattern for the end of a region. |
//\\s*endregion\\b |
regionMarker.borderWidth |
Width of the border line (in Text Mode). |
"3px" |
regionMarker.lineRanges |
Manual line-based regions. |
[] |
Example Configuration
{
"regionMarker.renderMode": "gutter",
"regionMarker.colors": ["#ff0000", "#00ff00", "#0000ff"],
"regionMarker.startRegex": "START BLOCK:",
"regionMarker.endRegex": "END BLOCK",
"regionMarker.lineRanges": [
{ "start": 10, "end": 20, "color": "red" }
]
}
Release Notes
0.0.1
- Initial release
- Basic region highlighting
- Nested region support
- Code folding
- Custom configuration
- Support for Text and Gutter rendering modes
