Skip to content

Add Razor theme to properly colorize Razor constructs in Visual Studio. #18769

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
NTaylorMullen opened this issue Feb 4, 2020 · 5 comments · Fixed by dotnet/razor#1717
Closed

Add Razor theme to properly colorize Razor constructs in Visual Studio. #18769

NTaylorMullen opened this issue Feb 4, 2020 · 5 comments · Fixed by dotnet/razor#1717
Assignees
@NTaylorMullen
Labels
area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates Done This issue has been fixed enhancement This issue represents an ask for new feature or an enhancement to an existing one
Milestone
Razor LSP Preview 3

Comments

@NTaylorMullen
Copy link

NTaylorMullen commented Feb 4, 2020 •
edited
Loading

Today in Visual Studio we have Razor syntactic colorization but all Razor constructs are colored blue. We should tie this to the existence Razor @ classification or fall back to our own in the case the Razor workload is not installed.

Best practice is to

  • Create a ClassificationFormatDefinition in Core VS that's used to colorize Razor constructs in the absense of the Razor workload.
  • Add a .tmTheme side-by-side our grammar to associate our Razor constructs with the ClassificationFormatDefinition
  • Move the existing Razor classifications to use ours (we'd name them the same so the user wouldn't see the difference).

For this issue we'll probably create our own ClassificationFormatDefinition that doesn't go in Core VS yet (shipped as part of our extension) as a stepping stone to properly colorize just the Razor LSP editor scenarios.
@NTaylorMullen NTaylorMullen added enhancement This issue represents an ask for new feature or an enhancement to an existing one cost: S area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates labels Feb 4, 2020
@NTaylorMullen NTaylorMullen added this to the Razor.Tooling milestone Feb 4, 2020
NTaylorMullen pushed a commit to dotnet/razor that referenced this issue Feb 4, 2020
Add Razor colorization grammar to Visual Studio.
9fc9375 
- The new grammar will apply to our LSP editor Razor files.
- The grammar doesn't look to colorize the embedded languages correctly. Have reached out to the VS editor team to investigate the issue further.
- Couldn't add tests because this was more of an end-to-end scenario.
- Added a new pkdef to our extension to allow us to hand-edit pkdef's (ours are usually auto-generated) for features that do not have a code-first model (TextMate).
- Expanded the VSIX extension to build the grammar project on run to ensure we always get the latest grammar.
- Does not include "proper" colorization of Razor constructs, that's tracked at dotnet/aspnetcore#18769

dotnet/aspnetcore#17801
@NTaylorMullen NTaylorMullen mentioned this issue Feb 4, 2020
Merged
@NTaylorMullen
Copy link
Author

Investigated this a bit further to see what it would mean for VSCode and the result is that VSCode doesn't currently support theming background colors. This means we can't unify our VSCode colors with Visual Studio because the Razor transition characters have a yellow background with black text. I played around with making those control characters entirely yellow but it just looked wrong.

The work in this issue will provide theming to solely VS and purposefully not include any changes to the VSCode world.

@warrenbuckley
Copy link

@NTaylorMullen seems like you was trying to do the same as me, in getting a matching style of black on yellow as the big brother VS does - microsoft/vscode#90070

@NTaylorMullen
Copy link
Author

@warrenbuckley woa, totally didn't read the body of the issue. Ya totally same gist.

NTaylorMullen pushed a commit to dotnet/razor that referenced this issue Feb 9, 2020
Add Razor colorization grammar to Visual Studio.
330f6e0 
- The new grammar will apply to our LSP editor Razor files.
- The grammar doesn't look to colorize the embedded languages correctly. Have reached out to the VS editor team to investigate the issue further.
- Couldn't add tests because this was more of an end-to-end scenario.
- Added a new pkdef to our extension to allow us to hand-edit pkdef's (ours are usually auto-generated) for features that do not have a code-first model (TextMate).
- Expanded the VSIX extension to build the grammar project on run to ensure we always get the latest grammar.
- Does not include "proper" colorization of Razor constructs, that's tracked at dotnet/aspnetcore#18769

dotnet/aspnetcore#17801
@NTaylorMullen
Copy link
Author

Based on the default theme in Visual Studio looks like we'll need to colorize a few more constructs such as some C# assignments, begin/end angle brackets for HTML and anything else that sticks out. For instance here's colorization today:

image

@NTaylorMullen NTaylorMullen mentioned this issue Feb 12, 2020
Merged
@NTaylorMullen
Copy link
Author

Capturing some of @danroth27's epic colorization investigation so we can ensure we work applicable pieces into VS.

Token Color Notes
razorTagHelperElement #800080, bold Same color used by VS light theme
razorTagHelperAttribute #800080, bold Same color used by VS light theme
razorTransition #C586C0 Same as Razor directives and C# using directive
razorDirectiveAttribute #C586C0 Same as Razor directives and C# using directive
razorDirectiveAttributeParameter #C586C0 Same as Razor directives and C# using directive

image

image

@NTaylorMullen NTaylorMullen self-assigned this Mar 19, 2020
NTaylorMullen pushed a commit to dotnet/razor that referenced this issue Mar 25, 2020
Associated our TextMate grammar scopes with VS classifications.
22a8d6a 
- This makes our new Razor LSP editor bits look almost identical to the existing VS experience.
- There are several issues in regards to C# in attributes and that's tracked here: dotnet/aspnetcore#20140
- There's no semantic colorization for tags or C# yet either so that breaks down the colorization expected for our Blazor components and TagHelpers.
- Had to name the textmate grammar with the specific name of `aspnetcorerazor.tmLanguage.tmTheme` in order to enable the VS themeing support to locate our theme.
- One big colorization difference that can't currently be supported is the background coloring of our C# bits. This is something VS' CoreEditor is willing to change on our behalf though.

Fixes dotnet/aspnetcore#18769
@NTaylorMullen NTaylorMullen mentioned this issue Mar 25, 2020
Merged
NTaylorMullen pushed a commit to dotnet/razor that referenced this issue Mar 26, 2020
Associated our TextMate grammar scopes with VS classifications.
2b08994 
- This makes our new Razor LSP editor bits look almost identical to the existing VS experience.
- There are several issues in regards to C# in attributes and that's tracked here: dotnet/aspnetcore#20140
- There's no semantic colorization for tags or C# yet either so that breaks down the colorization expected for our Blazor components and TagHelpers.
- Had to name the textmate grammar with the specific name of `aspnetcorerazor.tmLanguage.tmTheme` in order to enable the VS themeing support to locate our theme.
- One big colorization difference that can't currently be supported is the background coloring of our C# bits. This is something VS' CoreEditor is willing to change on our behalf though.

Fixes dotnet/aspnetcore#18769
@NTaylorMullen NTaylorMullen added the Done This issue has been fixed label Apr 7, 2020
@ghost ghost locked as resolved and limited conversation to collaborators May 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@NTaylorMullen NTaylorMullen

Labels
area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates Done This issue has been fixed enhancement This issue represents an ask for new feature or an enhancement to an existing one
Projects
None yet
Milestone
Razor LSP Preview 3
Development

Successfully merging a pull request may close this issue.

Associated our TextMate grammar scopes with VS classifications. dotnet/razor
2 participants
@warrenbuckley @NTaylorMullen