Adds support for the Vento template language to the Zed code editor.
- Syntax highlighting for Vento template files (
.vto,.vento) - YAML front matter support with proper language injection
- HTML injection for template content
- JavaScript injection for code blocks
- Complete support for all Vento keywords and constructs
All Vento keywords are properly parsed and highlighted:
{{ if }}/{{ /if }}- Conditional blocks{{ else if }}- Else-if branches{{ else }}- Else branches{{ for }}/{{ /for }}- Loop blocks (with optionalawait)
{{ set }}/{{ /set }}- Variable assignment (tag and block forms){{ echo }}- Output expressions
{{ layout }}/{{ /layout }}- Layout blocks{{ slot }}/{{ /slot }}- Slot definitions{{ default }}/{{ /default }}- Default content blocks{{ include }}- Include other templates{{ fragment }}/{{ /fragment }}- Fragment blocks (plugin)
{{ function }}/{{ /function }}- Function definitions (with optionalexport, includingexport async){{ import }}- Import from other templates{{ export }}/{{ /export }}- Export variables (tag and block forms)
{{> }}- JavaScript execution tag{{# #}}- Comment tag
This extension supports YAML front matter at the beginning of Vento templates:
---
title: My Page
date: 2024-01-01
tags:
- vento
- template
---
<h1>{{ title }}</h1>The YAML content within the front matter delimiters (---) will be properly highlighted and treated as YAML.
Install the extension as usual for Zed.
- Clone this repository
- In Zed, open the command palette (
Cmd+Shift+Pon macOS,Ctrl+Shift+Pon Linux/Windows) - Run the command "zed: install dev extension"
- Select the cloned repository folder
Vento is a fast and modern template engine for JavaScript. Learn more at vento.js.org.
MIT