如何在 VS Code 中启用 HTML 实体突出显示？

Question

在 VS Code UserVoice 页面上，there was a request 为 HTML 实体（例如 &）添加建议和突出显示。 Microsoft 将此标记为完成，并附有注释说明“此功能已在 Visual Studio 2013 中针对 HTML 和 Razor 文档实现”。我认为这意味着它是在 VS 2013 中实现的，而不是在 VS Code 中实现的。

假设这是正确的，如何在 HTML 文档中为这些项目添加突出显示？它们似乎在 XML 文档中正确突出显示。查看 syntaxes/html.plist，它看起来应该是捕获 HTML 实体，所以我会假设主题会适当地为它们着色，但我真的不明白它在后端是如何工作的。

我的问题是：

1. VS Code 是否应该突出显示这些项目？

2. 如果不是，我可以更改 HTML 语法文件或主题文件以使其这样做吗？如果是这样，我该怎么做？

这里是 html.plist（这是默认安装的）：

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

---编辑---

这里有一些屏幕截图来说明我的意思（都采用相同的主题）：

当涉及到这些实体时，XML.plist 看起来与 HTML.plist 非常相似，但我不会将 XML.plist 添加到这个已经很长的问题中，除非有人没有自己的副本并希望我这样做。

Answer 1

您可以使用扩展来做到这一点

您可以使用 VS Code 的 Yeoman 扩展生成器 yo code 将新的 TextMate 主题文件 (.tmTheme) 添加到您的 VS Code 安装中。扩展生成器采用现有的 TextMate 主题文件并将其打包以在 VS Code 中使用。

ColorSublime 有数百个现有的 TextMate 主题可供选择。选择您喜欢的主题并复制下载链接以在 Yeoman 生成器中使用。它将采用类似“http://colorsublime.com/theme/download/(number)”的格式。 “代码”生成器将提示您输入 .tmTheme 文件的 URL 或文件位置、主题名称以及与主题相关的其他信息。

将生成的主题文件夹复制到.vscode/extensions文件夹下的新文件夹中，然后重启VS Code。

使用 File > Preferences > Color Theme 打开颜色主题选择器主题，您可以在下拉菜单中看到您的主题。上下箭头可查看主题的实时预览。

您也可以自己创建主题

您还可以从头开始创作自己的 TextMate 主题。有关详细信息，请参阅 TextMate 主题和语言语法命名约定文档。

除了 TextMate 语言语法标准范围之外，VS Code 还具有自定义主题设置，您可以使用它们来调整自己的主题：

rangeHighlight：突出显示范围的背景颜色，例如快速打开和查找功能。

selectionHighlight：选择时突出显示的区域的背景颜色。

inactiveSelection：未聚焦时选择的背景颜色。

wordHighlight：读访问时符号的背景色，就像读取变量一样。

wordHighlightStrong：写访问期间符号的背景颜色，如写入变量。

findMatchHighlight: 匹配搜索区域的背景颜色。 currentFindMatchHighlight：与搜索匹配的当前区域的背景色。

findRangeHighlight: 选择搜索区域的背景颜色。

linkForeground：链接颜色。

activeLinkForeground：活动链接的颜色。

hoverHighlight: 悬停时的背景颜色。

referenceHighlight: 查找所有引用时引用的背景颜色。

guide：显示的参考线颜色以指示嵌套级别。

您可以在此处找到包含自定义设置的示例 VS Code 主题。

编写主题相当棘手，因为语法的行为都有些不同。尽量遵循 TextMate 约定并避免主题中的语言特定规则，因为语法也可以被扩展替换。

Answer 2

这是对 VS Code 的功能请求：https://github.com/Microsoft/vscode/issues/784

回答您的问题：

1. 是的。
2. 您可以向项目提交 Pull Request，从而使其他人受益！你要修改的代码是here和here's how you can contribute。

Answer 3

您可以更改“颜色主题”以突出显示 VS Code 中的 HTML 实体。 转到首选项 -> 颜色主题并选择另一个主题 - 例如“Light+（默认浅色）”或“Dark+（默认深色）”使 HTML 实体的突出显示工作。