YAML Tag Highlighting

Syntax highlighting for YAML embedded in JavaScript and TypeScript through the @nejs/yamltag string tag (source).

Tag a template literal with yaml`...` or yml`...` and the contents light up as YAML — keys, scalars, anchors, comments — while ${...} interpolations keep their normal JavaScript/TypeScript highlighting.

import { yaml } from '@nejs/yamltag'

const limits = { cpu: '500m', memory: '256Mi' }

const config = yaml`
  name: my-service     # highlighted as YAML
  retries: ${3}        # ${3} highlighted as JS
  limits: ${limits}
`

Companion package

This extension is purely cosmetic — it highlights, it does not parse. The runtime behavior comes from the @nejs/yamltag npm package, which you install in your project:

npm install @nejs/yamltag

The extension and the package version independently; any reasonably recent @nejs/yamltag works, since the highlighting only keys off the yaml/yml tag names (or the /* yaml */ marker), not the package internals.

What triggers highlighting

The comment marker is the way to highlight an aliased import. A static grammar can't follow import { yaml as y } to learn that y is the tag, so mark the literal explicitly:

import { yaml as y } from '@nejs/yamltag'

const doc = y/* yaml */`
  name: still-highlighted
`

/* yaml */ immediately before the backtick is what the grammar looks for; the preceding y is just your alias and is ignored by the highlighter.

How it works

This extension contributes a TextMate grammar injection. It does not define a new language or run any code — it injects into the existing JS/TS/JSX/TSX (plus Svelte, Vue, Astro) grammars, detects the tag, and embeds VS Code's built-in source.yaml grammar inside the template body. Coloring follows your active theme exactly as standalone YAML files do.

Supported host languages

JavaScript, JSX, TypeScript, TSX, .mts/.cts, and the <script> blocks of Svelte, Vue, and Astro files.

Install

From a marketplace

• VS Code: search for "YAML Tag Highlighting" in the Extensions view, or install from the Visual Studio Marketplace.
• Cursor / VSCodium / other forks: install from Open VSX.

From a .vsix

npm install
npm run package          # produces yamltag-<version>.vsix
code --install-extension yamltag-<version>.vsix
# Cursor:
cursor --install-extension yamltag-<version>.vsix

Develop

Open this folder in VS Code or Cursor and press F5 to launch an Extension Development Host. Open examples/sample.js to see the highlighting. Grammar changes are picked up on a reload (Cmd/Ctrl+R) of the host window — no rebuild, since the grammar is declarative.

To inspect scopes: Developer: Inspect Editor Tokens and Scopes from the command palette, with the cursor inside a yaml`...` block.

Limitations

• Aliased tags need the /* yaml */ marker. Static grammars can't resolve imports.
• Whole-line ${...} values. Highlighting is purely lexical; it does not model @nejs/yamltag's identity-injection semantics. It colors text, it does not parse the document.

License

MIT © Brielle Harrison