How can I enable HTML entity highlighting in VS Code?

Question

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.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.

Answer 1

You can do it using extensions

You can add new TextMate theme files (.tmTheme) to your VS Code installation using VS Code's Yeoman extension generator, yo code. The extension generator takes an existing TextMate theme file and packages it for use in VS Code.

ColorSublime has hundreds of existing TextMate themes to choose from. Pick a theme you like and copy the Download link to use in the Yeoman generator. It will be in a format like "http://colorsublime.com/theme/download/(number)". The 'code' generator will prompt you for the URL or file location of the .tmTheme file, the theme name, and other information related to the theme.

Copy the generated theme folder to a new folder under your .vscode/extensions folder and restart VS Code.

Open the Color Theme picker theme with File > Preferences > Color Theme and you can see your theme in the dropdown. Arrow up and down to see a live preview of your theme.

You can create a theme yourself too

You can also author your own TextMate themes from scratch. Consult the TextMate theme and language grammar naming conventions documentation for details.

Besides the TextMate language grammar standard scopes, VS Code also has custom theme settings which you can use to tune your own theme:

rangeHighlight: Background color of range highlighted, like by Quick open and Find features.

selectionHighlight: Background color of regions highlighted while selecting.

inactiveSelection: Background color of selections when not in focus.

wordHighlight: Background color of a symbol during read-access, like reading a variable.

wordHighlightStrong: Background color of a symbol during write-access, like writing to a variable.

findMatchHighlight: Background color of regions matching the search. currentFindMatchHighlight: Background color of the current region matching the search.

findRangeHighlight: Background color of regions selected for search.

linkForeground: Color of links.

activeLinkForeground: Color of active links.

hoverHighlight: Background color when hovered.

referenceHighlight: Background color of a reference when finding all references.

guide: Color of the guides displayed to indicate nesting levels.

You can find an example VS Code theme here which includes the custom settings.

Authoring a theme is fairly tricky as the grammars all behave a bit differently. Try to follow the TextMate conventions and avoid language specific rules in your theme as grammars can also be replaced by extensions.