CodeGlow for VS Code
Features
CodeGlow helps you focus on what matters by intelligently dimming inactive regions of your code. Like a spotlight on your active code block, it keeps you in the zone while maintaining context awareness.
Smart Focus Detection
- Paragraph Mode: Automatically detects and highlights text blocks between blank lines
- Symbol Mode: Uses VS Code's language server to focus on semantic blocks (functions, classes, etc.)
- Smooth Transitions: Seamlessly updates as you move through your code
- Smart Scroll Handling: Temporarily removes dimming while scrolling for better readability
Customizable Experience
- Adjustable Dimming: Fine-tune the opacity of inactive regions (0.0 to 1.0)
- Buffer Control: Set how many lines to process above and below the visible area
- Multiple Detection Modes: Choose between paragraph-based or symbol-based detection
- Scroll Behavior: Configure how the extension handles scrolling and transitions
- Performance Optimized: Only processes visible code, making it efficient even with large files
Zen Mode Integration
CodeGlow can now be configured to only activate when VS Code's Zen Mode is enabled. This is perfect for users who want to maintain maximum focus during dedicated writing or coding sessions. To use this feature:
- Enable the setting:
codeglow.onlyInZenMode
- Enter Zen Mode in VS Code (Cmd/Ctrl+K Z)
- CodeGlow will automatically activate and deactivate with Zen Mode
Installation
- Open VS Code
- Press
Ctrl+P
(or Cmd+P
on macOS)
- Type
ext install wescottsharples.codeglow
- Press Enter
Usage
- Open any code file
- Move your cursor to a code block
- The current block stays at full opacity while surrounding code is dimmed
- Toggle the effect with:
- Command Palette (
Ctrl+Shift+P
or Cmd+Shift+P
): "CodeGlow: Toggle Effect"
- Or set up your own keyboard shortcut
Configuration
CodeGlow can be customized through VS Code's settings:
```jsonc
{
// Opacity level for dimmed text (0.0 to 1.0)
"codeglow.dimOpacity": 0.3,
// Use paragraph mode (text between blank lines)
"codeglow.paragraphMode": true,
// Choose focus detection method
"codeglow.blockDetection": "paragraph", // or "documentSymbols"
// Number of buffer lines to process
"codeglow.bufferLines": 50,
// Enable/disable dimming removal while scrolling
"codeglow.disableWhileScrolling": true,
// Delay before reapplying dimming after scrolling (ms)
"codeglow.scrollDebounceDelay": 250,
// Enable debug logging
"codeglow.enableLogging": false,
// Enable CodeGlow only in Zen Mode
"codeglow.onlyInZenMode": true,
// Enable CodeGlow only for specific languages
"codeglow.enabledLanguages": ["*"] // Use specific language IDs like ["markdown", "typescript"]
}
```
CodeGlow is designed to be lightweight and efficient:
- Lazy loading: Only activates for specified file types
- Smart language support: Configure exactly which file types should use CodeGlow
- Only processes visible code
- Minimal CPU usage
- Low memory footprint
- Optimized for large files
- Smart scroll handling to maintain performance
Supported File Types
CodeGlow supports many common file types out of the box:
- Markdown (
.md
)
- TypeScript/JavaScript (
.ts
, .js
, .tsx
, .jsx
)
- Python (
.py
)
- Java (
.java
)
- C/C++ (
.c
, .cpp
)
- C# (
.cs
)
- Go (
.go
)
- Rust (
.rs
)
- PHP (
.php
)
- Ruby (
.rb
)
- Web Technologies (
.html
, .css
, .scss
, .less
)
- Data Formats (
.json
, .yaml
, .xml
)
- Modern Frameworks (
.vue
, .svelte
)
- SQL (
.sql
)
- Plain Text (
.txt
)
To enable CodeGlow for specific file types only:
- Open VS Code Settings
- Search for "CodeGlow: Enabled Languages"
- Add the language IDs you want to enable (e.g.,
["markdown", "typescript"]
)
- Or use
["*"]
to enable for all supported file types
Note: The extension only loads when you open supported file types or explicitly invoke CodeGlow commands, ensuring minimal impact on VS Code's performance.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes:
- Open an issue first to discuss what you would like to change
- Make sure to update tests as appropriate
- Follow the existing code style
License
MIT © Wescott Sharples
Acknowledgements
Inspired by Limelight.vim by Junegunn Choi. We aim to bring the same focused coding experience to VS Code users.
Release Notes
0.0.1
- Initial release
- Basic dimming functionality
- Paragraph and symbol-based detection modes
- Configurable settings
- Performance optimizations
Settings
codeglow.dimOpacity
: Opacity level for dimmed text (0.0 to 1.0)
codeglow.paragraphMode
: When enabled, highlights the entire paragraph containing the cursor instead of just the current line
codeglow.blockDetection
: Choose how CodeGlow determines the focused block: by language server symbols or by paragraphs
codeglow.bufferLines
: Number of additional lines to buffer above and below the visible range
codeglow.disableWhileScrolling
: When enabled, temporarily removes dimming effect while scrolling
codeglow.scrollDebounceDelay
: Delay in milliseconds before reapplying decorations after scrolling stops
codeglow.scrollVelocityThreshold
: Minimum scroll velocity to trigger dimming removal
codeglow.enableLogging
: Enable debug logging to the CodeGlow output channel
codeglow.onlyInZenMode
: When enabled, CodeGlow will only be active when VS Code's Zen Mode is enabled
codeglow.enabledLanguages
: Choose which languages should use CodeGlow