Find a new Razor syntax highlighting grammar

[ArmantG]

Type: Bug

It seems like VSCode doesnt know how to read Razor syntax, which is weird since Microsoft developed razor/blazor... Jetbrains Rider seems to get this 100%, colors for semantic/syntax highlighting work accurately. How is this possible? Even the default themes dont correct this? No extensions to fix this?

VSCode:

Rider:

VS Code version: Code 1.72.0 (64bbfbf67ada9953918d72e1df2f4d8e537d340e, 2022-10-04T23:19:55.212Z) OS version: Darwin arm64 21.6.0 Modes: Sandboxed: No

System Info

|Item|Value| |---|---| |CPUs|Apple M1 (8 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: disabled_off| |Load (avg)|1, 2, 2| |Memory (System)|8.00GB (0.08GB free)| |Process Argv|| |Screen Reader|no| |VM|0%|

Extensions (133)

Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 codesnap|adp|1.3.4 add-reference|adr|1.0.2 asp-net-core-switcher|adr|2.0.2 blazor-snippet-pack|adr|2.6.1 format-selection-as-html|adr|2.3.0 namespace|adr|1.1.2 user-secrets|adr|2.0.1 razor-snippets-for-asp-net-core|ale|0.0.3 project-manager|ale|12.7.0 ng-template|Ang|14.2.0 vscode-color-picker|Ant|0.0.4 swagger-viewer|Arj|3.1.2 markdown-emoji|bie|0.3.0 markdown-preview-github-styles|bie|1.0.1 vscode-tailwindcss|bra|0.8.7 xml2json|bui|1.2.4 npm-intellisense|chr|1.4.2 path-intellisense|chr|2.8.1 js-codeformer|cms|2.6.1 jsrefactor|cms|3.0.1 codeswing|cod|0.0.21 gitignore|cod|0.9.0 csharp-interpolated-string-converter|cor|0.1.6 supersharp|cra|0.1.4 csharpier-vscode|csh|1.3.5 vscode-mysql-client2|cwe|5.8.6 angular-schematics|cyr|5.2.6 csharp-grammar-extended|dan|1.1.1 vscode-markdownlint|Dav|0.48.1 vscode-eslint|dba|2.2.6 vscode-dotnet-auto-attach|Den|1.1.1 quicktype-refresh|dog|1.0.2 githistory|don|0.6.19 xml|Dot|2.5.1 es7-react-js-snippets|dsz|4.4.3 vscode-babel-coloring|dza|0.0.4 vscode-html-css|ecm|1.13.1 EditorConfig|Edi|0.16.4 vscode-nupkg|eri|1.0.1 prettier-vscode|esb|9.9.0 font-switcher|eva|4.1.0 git-project-manager|fel|1.8.2 scaffold|fir|1.0.0 auto-close-tag|for|0.5.14 auto-complete-tag|for|0.1.0 auto-rename-tag|for|0.1.10 code-runner|for|0.11.8 dotnet|for|0.0.4 dotnet-test-explorer|for|0.7.8 asp-net-core-switcher|fra|2.0.2 auto-using|Fud|0.7.15 vscode-angular-html|gha|1.8.4 remotehub|Git|0.44.0 vscode-pull-request-github|Git|0.50.0 live-sass|gle|5.5.1 vscode-semistandard-format|hom|0.0.9 rest-client|hum|0.25.1 blazorNewComponent|hun|1.0.0 output-colorizer|IBM|0.1.2 mysql-syntax|jak|1.3.1 search-node-modules|jas|1.3.0 markdown-extended|jeb|1.1.3 nuget-reverse-package-search|jes|0.1.68 vscode-csharp-snippets|jor|1.1.0 roslynator|jos|4.1.1 docomment|k--|0.1.31 aspnetcorerazor-html-css-class-completion|kev|1.0.3 wordcounter|kir|2.4.3 dotnet-core-essentials|Kis|0.0.8 vscode-gutter-preview|kis|0.30.0 csharpextensions|kre|1.7.3 dotnet|leo|1.3.0 next-js-ts-snippets|loc|2.0.3 csharp-colors|log|0.1.8 MagicPython|mag|1.1.0 json-to-ts|Mar|1.7.5 vscode-pdf|mat|0.0.6 dotnet-core-commands|mat|1.0.6 rainbow-csv|mec|3.2.0 vscode-language-babel|mgm|0.0.36 git-graph|mhu|1.30.0 gitignore|mic|1.0.1 xml-format|mik|1.1.3 vscode-scss|mrm|0.10.0 blazorwasm-companion|ms-|1.1.0 csharp|ms-|1.25.0 dotnet-interactive-vscode|ms-|1.0.3504060 vscode-dotnet-runtime|ms-|1.5.0 jupyter|ms-|2022.9.1002791758 js-debug-nightly|ms-|2022.10.617 live-server|ms-|0.4.3 remote-repositories|ms-|0.22.0 vscode-typescript-next|ms-|4.9.20221007 vscode-dotnet-watch|Mur|1.1.8 color-highlight|nau|2.5.0 gremlins|nho|0.26.0 vscode-extension-auto-import|Nuc|1.4.3 indent-rainbow|ode|8.3.1 es6-css-minify|olb|3.3.3 vscode-nuget-gallery|pat|0.0.24 vscode-versionlens|pfl|1.0.10 vscode-gitignore-generator|pio|1.0.3 material-product-icons|PKi|1.4.1 Csharp-ASPNETCore|rah|1.11.0 vscode-thunder-client|ran|1.19.7 vscode-xml|red|0.21.2022062916 vscode-yaml|red|1.10.1 csharp-snippet-productivity|ric|1.3.0 LiveServer|rit|5.7.9 csharp-helper|roa|0.0.14 blazorsnippets|Sco|1.5.1 markdown-preview-enhanced|shd|0.6.3 vscode-scss-formatter|sib|2.4.3 code-spell-checker|str|2.10.1 Blazor-VSCode-Extensions|Syn|20.3.47 msbuild-project-tools|tin|0.4.9 vscode-mdx|uni|1.0.3 refactor-css|urb|0.4.2 errorlens|use|3.6.0 vscodeintellicode|Vis|1.2.28 image-viewer|vsc|1.3.2 file-icons-mac|way|1.0.1 vscode-import-cost|wix|3.3.0 dotnetboost|wwa|0.1.2 better-align|wwm|1.1.6 JavaScriptSnippets|xab|1.8.0 ReactSnippets|xab|2.4.0 vscode-mdx-preview|xyc|0.3.3 markdown-all-in-one|yzh|3.4.3 json|Zai|2.0.2 mdx-blog-post|Zak|0.0.1 vscode-open-in-github|ziy|1.3.6 (2 theme extensions excluded)

[alexr00]

@ArmantG can you share a copy/pastable snippet that I can use to reproduce the issue you're seeing?

[ArmantG]

@ArmantG can you share a copy/pastable snippet that I can use to reproduce the issue you're seeing?

The screenshots show the initial template used to create a new .net6 blazor wasm (not hosted) project. So essentially the stock project created when starting a new blazor wasm app. No code added, just standard boilerplate code from project template.

.net6, blazor wasm, not hosted, created using visual studio 2022 for mac.

This is the fetchData razor page code:

@page "/fetchdata"
@inject HttpClient Http

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (_forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in _forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? _forecasts;

    protected override async Task OnInitializedAsync()
    {
        _forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public abstract class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string? Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

[ArmantG]

So weird that github managed to add some syntax to that bit of code.

this is cobalt2 theme in vscode:

[alexr00]

Thanks for the snippet. We used to get our Razor syntax highlighting grammar from https://github.com/demyte/language-cshtml but that repository is gone. I'll take this as a feature request to find another Razor grammar to use.

[ArmantG]

Thanks. Sad to see that this issue has been around for more than 3 years... Not holding my breath for a solution here as this doesnt seem to be particularly high on anyone's to-do list... But here's hoping something comes from this.

Best solution now is to use JetBrains Rider until this is sorted.

[alexr00]

Let's see if there's any objection to https://github.com/OmniSharp/omnisharp-vscode/issues/5404.

[RedCMD]

Best solution now is to use JetBrains Rider until this is sorted.

Is there not a Razor syntax highlighter extension on the marketplace?

[ArmantG]

None I could find. Googling it also pointed me towards one extension that hasnt been worked on in 4 years and was useless. But it should really be a vscode feature don't you think? Microsoft should at least have support for their products in their own code editor? 🤣 Anyway, it will get figured out I'm sure.

[alexr00]

Verified through integration tests.