WP Block Highlighting for VS Code

Improves readability of WordPress Gutenberg block markup in HTML and PHP files.

Installation

Install from VS Code Marketplace

Or search for "WP Block Highlighting" in the VS Code Extensions view (Cmd+Shift+X).

From Source

git clone https://github.com/tomjn/vscode-wpblock-highlighting
cd vscode-wpblock-highlighting
npm install
npm run compile

Then press F5 in VS Code to test, or package with vsce package.

Features

• Depth-based highlighting - Different background colors for each nesting level
• Pair matching - Opening and closing block comments highlight when cursor is on either
• JSON syntax highlighting - Block attributes display with proper JSON colors (keys, strings, numbers, brackets)
• Block folding - Collapse/expand WordPress block regions
• Jump to matching pair - Cmd+Shift+M (Mac) / Ctrl+Shift+M (Windows/Linux)
• Breadcrumb navigation - Shows block hierarchy in VS Code's breadcrumb bar and Outline view
• Status bar path - Shows current block path in status bar (e.g., group > columns > column)
• Block diagnostics - Warning squiggles for unclosed or orphan blocks
• Hover information - Hover over blocks to see name, depth, and attributes

Configuration

Setting	Default	Description
wpBlockHighlighting.enabled	true	Enable/disable the extension
wpBlockHighlighting.depthColors	[blue, green, orange, purple, pink, teal]	Background colors per nesting depth
wpBlockHighlighting.matchHighlightColor	rgba(255, 204, 0, 0.2)	Background for matched pairs
wpBlockHighlighting.matchNameHighlightColor	#ffcc00	Text color for wp:block-name in matched pairs
wpBlockHighlighting.jsonKeyColor	#9cdcfe	JSON property key color
wpBlockHighlighting.jsonStringColor	#ce9178	JSON string value color
wpBlockHighlighting.jsonNumberColor	#b5cea8	JSON number/boolean color
wpBlockHighlighting.jsonBracketColor	#ffd700	JSON bracket color
wpBlockHighlighting.languages	["html", "php"]	Languages to activate for

License

GPL-2.0