Microsoft/monaco-editor

Razor syntax highlighting does not recognize @code or @functions

Open

#1,997 opened on Jun 3, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (14,836 stars) (1,283 forks)batch import
buggrammarshelp wanted

Description

monaco-editor version: 0.2.0 Browser: Tested on Chromium and Firefox OS: Ubuntu 19.10

When the language is set to razor, @code or @functions is not recognized and shows up (along with all the C# code inside of it) in the default text color. This can be reproduced by going to the Monaco Editor homepage, setting the language to razor, and entering this code:

@{
    @* This C# code will have syntax highlighting *@
    var test = "testing";
    if (true)
    {
        Console.WriteLine("testing");
    }
}
@code {
    @* This C# code will not have syntax highlighting *@
    var test = "testing";
    if (true)
    {
        Console.WriteLine("testing");
    }
}
@functions {
    @* This C# code will also not have syntax highlighting *@
    var test = "testing";
    if (true)
    {
        Console.WriteLine("testing");
    }
}

Contributor guide

Tech stack
csharphtmltypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Monaco editor language definition APIRazor syntaxTypeScript basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue involves the Razor language tokenizer in Monaco Editor. The tokenizer likely needs to be updated to recognize @code and @functions blocks as valid C# code regions. Starting point: Look at the Razor language definition file (likely in src/basic languages/razor/razor.ts or similar) and add tokenizer rules for these blocks. The issue comments (3) may contain additional insights; check if any maintainer has provided guidance. Also test using the playground to verify the fix.