Wrong syntax highlighting in RenderFragments

[MarvinKlein1508]

@davidwengier another issue with syntax highlighting in the razor editor. This time within custom renderfragments which I want to re-use in different places. Notice how @Item.Href and @onclick="() => _isExpanded = !_isExpanded" are displayed in brown.

@if (Item.ChildItems.Any())
{
    @if (!string.IsNullOrEmpty(Item.Role))
    {
        <AuthorizeView Roles="@Item.Role">
            <Authorized>
                @NavGroupTemplate
            </Authorized>
        </AuthorizeView>
    }
    else
    {
        @NavGroupTemplate
    }
}
else
{
    <a href="@Item.Href" class="nav-link">@Item.Text</a>
}

@code {
    [Parameter, EditorRequired]
    public NavItem Item { get; set; }

    private bool _isExpanded;

    private RenderFragment NavGroupTemplate => __builder =>
    {
        <a href="@Item.Href" class="nav-link" @onclick="() => _isExpanded = !_isExpanded">@Item.Text</a>
        @if (_isExpanded)
        {

            @foreach (var item in Item.ChildItems)
            {
                <NavMenuItem Item="item" />
            }
        }
    };
}

public class NavItem
{
    /// <summary>
    /// Gets or sets the HyperText Reference (href).
    /// </summary>
    public string? Href { get; set; }

    /// <summary>
    /// Gets or sets the navigation link text.
    /// </summary>
    public string? Text { get; set; }

    /// <summary>
    /// Gets or sets the required authorization role to view this navigation item.
    /// </summary>
    public string? Role { get; set; }

    /// <summary>
    /// Gets or sets the collection of child navigation items.
    /// </summary>
    public IEnumerable<NavItem> ChildItems { get; set; } = [];
}

[bzd3y]

I noticed this the other day as well. To add some information that might be relevant:

1. when you add code like this it seems to change the coloring for the rest of the razor file beyond the code in the @code block that causes it.
2. my text editor colors are entirely different than @MarvinKlein1508 's, but the erroneous color seems to be that same brown/orange color.

[davidwengier]

Interestingly, this doesn't repro for me with the @onclick attribute, but it does with the href. Weird.

[davidwengier]

Guessing this is a textmate issue. Inside the render fragment, things are coming back as "string", which must have a higher priority that the rest.

In render fragment:

Not in render fragment:

[MarvinKlein1508]

Interestingly, this doesn't repro for me with the @onclick attribute, but it does with the href. Weird.

Are you using a different color encoding? Your @onclick isn't highlighted purple as well.

[davidwengier]

Are you using a different color encoding? Your @onclick isn't highlighted purple as well.

Good point. Maybe I'm hitting #11801, and you're running 18.0 not insiders I would guess.

Good news is, I hate working on TextMate, but copilot doesn't seem to mind. Initial results are promising: dotnet/vscode-csharp#8818
Will manually test tomorrow, when I'm not sitting in front of the TV getting a bot to do my work for me :)

[davidwengier]

Quick update: The grammar updates look good, and solve the misclassification in VS Code. Sadly they don't solve the visual issue in VS, so I've reached out to the editor team to see what they have to say for themselves