Zing Template Syntax
Syntax highlighting and snippets for Zing (.zing) template files in VS Code.
First time opening a .zing file? A one-click prompt will offer to apply Zing's recommended syntax colors — these are scoped to .zing files only and never touch your active theme or any other language. Click Apply when it appears, or run "Zing: Apply Recommended Colors" manually anytime from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
Features
- Syntax highlighting for
{{ }}, {!! !!}, {{-- --}}, and @directive(...) blocks on top of embedded HTML — including nested parentheses and string literals inside directive expressions (e.g. @if(strtoupper($name) === 'JOHN')).
- Bracket matching and auto-closing for
{{ }}, {!! !!}, {{-- --}}, and standard (){}[]/quote pairs.
- Smart comment toggling —
Ctrl+/ / Cmd+/ always wraps the full line in {{-- --}}, even if it already contains other comment-like syntax.
- Snippets for every directive pair in Zing (
@if, @foreach, @switch, @section, @verbatim, etc.), plus echo and comment shorthands.
- Category-based coloring — main directives, control-flow statements, utility directives (
@break/@continue), and attribute helpers (@class/@checked) are each their own distinct color group.
Directive highlighting is name-agnostic (@\w+), so new directives added to Zing's registry highlight automatically without an update to this extension.
Install
Search "Zing Template Syntax" in VS Code's Extensions panel, or install directly:
code --install-extension RexLLins.zing-syntax
Usage
Open any .zing file — highlighting and snippets are active immediately. Type a directive prefix like @if or @foreach and press Tab to expand the snippet.
Recommended colors
Zing directives are colored using dedicated TextMate scopes (keyword.control.directive.main.zing, variable.other.object.zing, etc.) that only ever appear in .zing files — no other language produces them. Applying the recommended colors is safe and additive: it adds rules to your editor.tokenColorCustomizations setting without replacing your theme or affecting any other file type.
| Category |
Example |
| Main directives |
@extends, @section, @include, @yield, @verbatim, @php |
| Control-flow statements |
@if, @foreach, @switch, @case |
| Utility directives |
@break, @continue, @once |
| Attribute helpers |
@class, @checked, @attributes |
Apply them anytime via Command Palette → "Zing: Apply Recommended Colors."
Local development
- Clone this repo and open it in VS Code.
- Press
F5 to launch an Extension Development Host with the extension active.
- Open a
.zing file in that window.
Syncing with Zing's directive set
Directive highlighting requires no updates as Zing's directive list grows. Snippets are hand-written per directive and need a manual addition when a new directive ships.
License
MIT
| |
