Skip to content

Add Razor language support for .razor and .cshtml - #103

Open
meeksoft wants to merge 2 commits into
zed-extensions:mainfrom
meeksoft:razor-editing
Open

meeksoft wants to merge 2 commits into
zed-extensions:mainfrom
meeksoft:razor-editing

Conversation

@meeksoft

Copy link
Copy Markdown

Adds Razor syntax highlighting for Blazor components (.razor) and ASP.NET Core Razor Pages / MVC views (.cshtml), following the guidance in zed-industries/extensions#7567 to bring this into the C# extension.

Fixes #41.

What's included

  • Razor language (languages/razor/) registered for .razor and .cshtml, with highlighting for directives, implicit/explicit expressions, control-flow blocks, and C# code blocks; plus bracket matching, auto-indentation, and razor code fences.
  • Grammar pins in extension.toml:
    • razor → Meeksoft/tree-sitter-razor @ 97ce5a5 — fork of tris203/tree-sitter-razor @ d4664e4 (current main), adding parsing of Razor expressions inside quoted HTML attribute values and queryable attribute names.
    • html_razor → Meeksoft/tree-sitter-html @ bb3ca3e — fork of tree-sitter/tree-sitter-html @ bfa075d (the revision Zed's html extension pins), whose quoted attribute values may contain Razor expressions.
  • Markup is highlighted by injecting a hidden html-razor language (languages/html-razor/, ~50 lines of queries) instead of plain html, so values like data-date="@x.ToString("o")" keep their string colors instead of terminating at the first inner quote. CSS in <style> and JS in <script> still highlight through the standard injection chain.

Scope

Editing support only. No language server is attached to Razor buffers, and .cs, .csproj, and .slnx behavior is unchanged.

Screenshots

Dashboard.cshtml + ProductCatalog.razor in VS Code Dark Modern:

Razor highlighting in VS Code Dark Modern

The same files in Ayu Mirage:

Razor highlighting in Ayu Mirage

Verification

Installed as a dev extension and verified:

  • .cs, .csproj, .slnx highlighting and language servers unchanged
  • .razor / .cshtml recognized as Razor; directives, expressions, and control flow highlighted
  • CSS/JS injections inside <style> / <script> work
  • Attribute expressions with nested quotes colored correctly
  • No language server starts for Razor buffers

Copilot AI lite review requested due to automatic review settings September 15, 2026 23:57
@cla-bot cla-bot Bot added the cla-signed label Sep 15, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

languages/html-razor/highlights.scm uses nonstandard capture names (@punctuation.*.html) that are inconsistent with the repo’s other queries and may not be themed correctly in Zed.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

This PR adds a Razor language definition to the C# Zed extension so .razor (Blazor components) and .cshtml (ASP.NET Razor Pages/MVC views) get syntax highlighting and basic editor behaviors, while leaving existing C# / project-file behavior unchanged.

Changes:

  • Registers a new Razor language for .razor and .cshtml, including syntax highlighting, bracket matching, and indentation rules.
  • Adds a hidden html-razor language used for markup highlighting/injection so Razor expressions inside quoted attribute values don’t break string coloring.
  • Pins tree-sitter grammars for razor and a forked html_razor in extension.toml.
File summaries
File Description
README.md Updates extension description to mention Razor highlighting.
extension.toml Adds grammar pins for razor and html_razor.
languages/razor/config.toml Registers the Razor language and file suffixes.
languages/razor/highlights.scm Adds Razor + inlined C# highlighting queries and overrides.
languages/razor/injections.scm Injects markup regions into html-razor for consistent HTML/CSS/JS highlighting.
languages/razor/indents.scm Defines indentation behavior for braces/brackets/parentheses.
languages/razor/brackets.scm Defines bracket matching pairs for Razor buffers.
languages/html-razor/config.toml Adds hidden html-razor language used only for injections.
languages/html-razor/highlights.scm Provides markup highlighting used by injected html-razor layers.
languages/html-razor/injections.scm Injects CSS/JS inside <style>/<script> and common attribute contexts.
Review details

Suppressed comments (1)

languages/html-razor/highlights.scm:25

  • html-razor uses @punctuation.bracket.html for tag delimiters; other query files in this repo use standard captures like @punctuation.bracket/@punctuation.delimiter without language suffixes. Using the standard capture improves theme compatibility and keeps punctuation coloring consistent.
[
  "<"
  ">"
  "<!"
  "</"
  "/>"
] @punctuation.bracket.html
  • Files reviewed: 10/12 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.


(entity) @string.special

"=" @punctuation.delimiter.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Syntax Highlighting for Razor/CSHTML files

2 participants