linguist: Incorrect syntax highlighting of cshtml files in GitHub

Razor pages (i.e. those with an extension of .cshtml) are syntax highlighted using the C# syntax highlighter. However, the vast majority of a Razor page is HTML instead of C#, and the syntax highlighting of the HTML part is either absent or completely wrong. Not only that, but many of the at-directives are not correctly syntax highlighted.

(see https://github.com/infinnie/TodoServer/blob/master/TodoServer/Views/Todos/Index.cshtml )

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 17 (7 by maintainers)

Most upvoted comments

Visual Studio Code editor already has grammars that are needed to correctly highlight cshtml files. The grammars are located in Visual Studio Code syntaxes folder and are fully compatible with Atom & Github parsing engines as far as I know. So why not to take production-ready highlighters from there? atom/language-csharp repository already uses Microsoft’s grammar (but packages don’t seem to be uploaded to Atom and Github yet), so this can be done with cshtml too. @Alhadis hope this helps!

worldbeater on Feb 9, 2018

@lildude, I’m sorry - I saw the comment earlier stating that, it was just a moment of frustration.

alphonso77 on Oct 23, 2019

@dazbradbury the grammar used for .cshtml files is located here, just in case you wish to submit a fix.

worldbeater on Jan 10, 2019

@dazbradbury That’s going to be a problem with the grammar itself and easily reproducible by checking it directly within Lightshow.

You’ll need to raise an issue against the grammar itself for this to be resolved. Once the grammar has resolved the issue, the change will automatically be pulled in in the next release of Linguist after it’s fixed in the grammar.

lildude on Jan 10, 2019

Does one of you want to open a pull request to implement this change (move .cshtml to its own language entry with the adequate grammar)?

pchaigno on Nov 6, 2018

The *.cshtml is a mix of html and c#. I would say treat it as HTML, but when you see @<expression>, then it’s a C# code.

For example:

@if (User.Identity.IsAuthenticated)
{
  <ul class="nav navbar-nav navbar-right">
    <li><a asp-controller="Account" asp-action="Signout">Sign out</a></li>
  </ul>
}
else
{
  <ul class="nav navbar-nav navbar-right">
    <li><a asp-controller="Account" asp-action="Signin">Sign in</a></li>
  </ul>
}

Where @<expression> can be inside HTML tag. For instance,

<img width="20" height="20" class="avatar" alt="@User.Identity.Name" src="@User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value">

Check Microsoft Docs for more details about Razor syntax.

ob1dev on May 7, 2018