How can I enable HTML entity highlighting in VS Code?

Viewed 3385

On the VS Code UserVoice page, there was a request to add suggestions and highlighting for HTML entities such as &. Microsoft marked this as complete with a comment stating "This feature was implemented in Visual Studio 2013 for HTML and Razor documents." I assume that means that it was implemented in VS 2013, but not VS Code.

Assuming that's correct, how can I add highlighting for these items within HTML documents? They seem to highlight properly within XML documents. Looking at syntaxes/html.plist, it looks like it should be capturing HTML entities, so I would assume the theme would color them appropriately, but I don't really understand how any of it works on the backend.

My questions are:

  1. Should VS Code be highlighting these items?

  2. If not, can I change the HTML syntax file or theme file to make it do so? If so, how would I do that?

Here's html.plist (which is the default, as it installed):

<key>entities</key>
        <dict>
            <key>patterns</key>
            <array>
                <dict>
                    <key>captures</key>
                    <dict>
                        <key>1</key>
                        <dict>
                            <key>name</key>
                            <string>punctuation.definition.entity.html</string>
                        </dict>
                        <key>3</key>
                        <dict>
                            <key>name</key>
                            <string>punctuation.definition.entity.html</string>
                        </dict>
                    </dict>
                    <key>match</key>
                    <string>(&amp;)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)</string>
                    <key>name</key>
                    <string>constant.character.entity.html</string>
                </dict>
                <dict>
                    <key>match</key>
                    <string>&amp;</string>
                    <key>name</key>
                    <string>invalid.illegal.bad-ampersand.html</string>
                </dict>

---EDIT---

Here's some screenshots to clarify what I mean (both taken with same theme):

xml doc with highlighting

html without highlighting

XML.plist looks pretty similar to HTML.plist when it comes to these entities, but I won't add XML.plist to this already lengthy question unless someone doesn't have their own copy and wants me to.

3 Answers

You can change the "Color Theme" to highlight HTML entities in VS Code. Go to Preferences -> Color Theme and select another theme – for example "Light+ (default light)" oder "Dark+ (default dark)" to make highlighting of HTML entities work.

Related