Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>WordPress Syntax HighlighterNew to Visual Studio Code? Get it now.
WordPress Syntax Highlighter

WordPress Syntax Highlighter

Matthias Hunt

|
2,558 installs
| (4) | Free
Full Site Editing and Gutenberg Semantic Highlighting
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

This extension provides syntax highlighting for the following WordPress syntaxes that exist inside traditional comment blocks:

  • Plugin header fields (PHP)
  • Block patten fields (PHP)
  • Theme header fields (style.css)
  • Block markup (HTML + JSON)

Examples

HTML

Screenshot of an HTML file containing colorized WordPress blocks

CSS

Screenshot of a CSS WordPress theme file containing a colorized header

PHP

Screenshot of a PHP WordPress theme file containing a colorized block pattern header and colorized HTML

Additional Features

The Syntax Highlighter also implements rules for pattern/header field validation based on the following official documentation:

  • https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/
  • https://developer.wordpress.org/themes/advanced-topics/block-patterns/
  • https://developer.wordpress.org/plugins/plugin-basics/header-requirements/
  • https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

Screenshot of a PHP WordPress theme file containing a colorized block pattern header and colorized HTML

Unmatched brackets cause error highlighting inside the embedded JSON of WordPress blocks

Screenshot of a PHP WordPress theme file containing a colorized block pattern header and colorized HTML

Credits

This project was inspired by Gutenberg Comment Highlight by @chrisrhymes

Wapuu design by @marktimemedia

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft