Customizing the Tag Helper element.

ASR 671

I am following below Microsoft link to change the Tag Helper element font. https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-6.0

I am using ImageTagHelper:
<img src="~/images/image1.jpg" alt="image" asp-append-version="true" />

When I change the color to Green from setting "HTML razor tag helper element" Nothing happened.

But when I select another option "HTML razor tag helper Attribute." color of asp-append-version changes.

So, what does "HTML razor tag helper element" do. (Tools > Options > Environment > Fonts and Colors)

AgaveJoe 26,191 Reputation points

2022-04-27T12:04:57.897+00:00

Web applications use CSS to affect text fonts.

CSS Fonts

Your example HTML is an image element not a text. It is not clear what you are changing to "Green" or what you are trying to accomplish.
ASR 671 Reputation points

2022-04-27T12:37:16.537+00:00

There is a predefined setting in Microsoft. Within visual studio.

Tools > Options > Environment > Fonts and Colors -> HTML razor tag helper element.

According to Microsoft in below link:
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-6.0

It is there to change the color of Tag Helper in Developmet mode.
It is not for CSS. It is there to pick Tag Helper color as per developer convenience in ASP .NET CORE. In Development mode.
AgaveJoe 26,191 Reputation points

2022-04-27T13:23:25.37+00:00

So this is a Visual Studio question and has nothing to do with the tags dotnet-aspnet-core-general, dotnet-runtime, or dotnet-aspnet-core-mvc.????

I'm not sure exactly what color you are trying to assing to what part of the tag helper. I set the element name to yellow and it just worked.

If you feel there is a problem with Visual Studio then click the "Send Feedback" button found in the upper right of Visual Studio window.
SurferOnWww 1,906 Reputation points

2022-04-28T01:07:25.03+00:00

<img src="~/images/image1.jpg" alt="image" asp-append-version="true" />

>

When I change the color to Green from setting "HTML razor tag helper element" Nothing happened.

Are you sure that you are talking about the img tag? If so where is the text of img tag to apply to font you specified with the "HTML razor tag helper element"?
ASR 671 Reputation points

2022-04-28T03:38:39.8+00:00

2 answers

Callida Takemi 1 Reputation point

2022-04-27T18:20:46.32+00:00

The Information you shared above is great. I have been reading all you shared here. In this you explained everything very well. If i want any further guideline we will contact you here https://learn.microsoft.com/en-us/answers/questions/828350/customizing-the-tag-helper -results -element-font.html
Please sign in to rate this answer.
ASR 671 Reputation points

2022-04-28T03:41:04.917+00:00
Sign in to comment
ASR 671 Reputation points

2022-04-28T04:23:59.853+00:00

I got the difference. There are two settings Within Options -> Environment -> Font & Colors -> Display Items in Visual Studio.

Setting 1 "HTML Element Name"
Setting 2 "HTML Razor Tag Helper Element".

Now because many tag helper share comman name as of HTML Element name. "HTML element override font and color setting for "HTML Razor Tag Helper Element".
For example color won't change for "Image Tag Helper" because it target <img> which is also an HTML image element. Similary for AnchorTag Helper which target "<a>".

But if we try withEnvironment tag helper like below, it will work
<environment>
<strong>IWebHostEnvironment.EnvironmentName is Staging or Production</strong>
</environment>

Or, for "Partial" Tag Helper like:
<partial name="Amit">
</partial>
Please sign in to rate this answer.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2022-04-28T07:49:55.95+00:00

Tools > Options > Environment > Fonts and Colors -> HTML razor tag helper element.

This behavior applies to the VS Text Editor. So, it is a Visual Studio question.

If you feel there is a problem with Visual Studio then click the "Send Feedback" button found in the upper right of Visual Studio window. Or you can submit a feed back by click the "This Page" at the bottom of this page.
Sign in to comment