Summary
Ship a VS Code extension that provides syntax highlighting for MDS files via a TextMate injection grammar. This highlights @ directives as keywords and {var} interpolations as embedded expressions, layered on top of standard Markdown highlighting.
Motivation
MDS files currently render as plain Markdown in editors — @if, @for, @define, etc. appear as regular text with no visual distinction. Syntax highlighting is the most basic editor feature and the single biggest DX improvement for MDS authoring. VS Code is the most widely used editor for this audience.
Scope
- A
mds.tmLanguage.json TextMate grammar that injects into the Markdown scope
- Keyword highlighting for:
@import, @if, @elseif, @else, @for, @define, @end, @export, @include, @extends, @block, @message
- Interpolation highlighting for
{var}, {func(args)}, {ns.func(args)}
- String literal highlighting inside directives and function calls
- Frontmatter highlighting (YAML between
--- fences — already handled by Markdown grammar)
- File icon for
.mds files
- Published to VS Code Marketplace under the
mdscript publisher
Design Considerations
- Injection grammar: Injects into
text.html.markdown scope rather than defining a standalone grammar. This preserves all Markdown highlighting (headers, bold, links, code blocks) and adds MDS-specific tokens on top.
- Testing: Use
vscode-tmgrammar-test for snapshot testing of token scopes
- Repo structure: Either a new
editor/vscode/ directory in this repo or a separate mds-vscode repo (design decision)
- Extension size: Should be tiny — just the grammar JSON, no runtime dependencies
- Marketplace publishing: Needs a
mdscript publisher account on the VS Code Marketplace
Acceptance Criteria
Summary
Ship a VS Code extension that provides syntax highlighting for MDS files via a TextMate injection grammar. This highlights
@directives as keywords and{var}interpolations as embedded expressions, layered on top of standard Markdown highlighting.Motivation
MDS files currently render as plain Markdown in editors —
@if,@for,@define, etc. appear as regular text with no visual distinction. Syntax highlighting is the most basic editor feature and the single biggest DX improvement for MDS authoring. VS Code is the most widely used editor for this audience.Scope
mds.tmLanguage.jsonTextMate grammar that injects into the Markdown scope@import,@if,@elseif,@else,@for,@define,@end,@export,@include,@extends,@block,@message{var},{func(args)},{ns.func(args)}---fences — already handled by Markdown grammar).mdsfilesmdscriptpublisherDesign Considerations
text.html.markdownscope rather than defining a standalone grammar. This preserves all Markdown highlighting (headers, bold, links, code blocks) and adds MDS-specific tokens on top.vscode-tmgrammar-testfor snapshot testing of token scopeseditor/vscode/directory in this repo or a separatemds-vscoderepo (design decision)mdscriptpublisher account on the VS Code MarketplaceAcceptance Criteria
.mdsfiles get MDS-aware syntax highlighting in VS Code