如何在 VS Code 中啟用 HTML 實體突出顯示？

Question

在 VS Code UserVoice 頁面上， 有人要求為&等 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代碼將新的TextMate主題文件（.tmTheme）添加到VS Code安裝中。 擴展生成器獲取現有的TextMate主題文件並將其打包以在VS Code中使用。

ColorSublime有數百個現有的TextMate主題可供選擇。 選擇您喜歡的主題並復制下載鏈接以在Yeoman生成器中使用。 它將采用“ http://colorsublime.com/theme/download/(number) ”之類的格式。 “代碼”生成器將提示您輸入.tmTheme文件的URL或文件位置，主題名稱以及與主題相關的其他信息。

將生成的主題文件夾復制到.vscode/extensions文件夾下的新文件夾，然后重新啟動VS Code。

使用文件>首選項>顏色主題打開顏色主題選擇器主題，您可以在下拉列表中看到您的主題。 向上和向下箭頭以查看主題的實時預覽。

您也可以自己創建主題

您還可以從頭開始創作自己的TextMate主題。 有關詳細信息，請參閱TextMate主題和語言語法命名約定文檔。

除了TextMate語言語法標准范圍，VS Code還具有自定義主題設置，您可以使用它們來調整自己的主題：

rangeHighlight ：突出顯示范圍的背景顏色，例如快速打開和查找功能。

selectionHighlight ：選擇時突出顯示的區域的背景顏色。

inactiveSelection ：不在焦點時選擇的背景顏色。

wordHighlight ：讀取訪問期間符號的背景顏色，如讀取變量。

wordHighlightStrong ：寫入訪問期間符號的背景顏色，如寫入變量。

findMatchHighlight ：與搜索匹配的區域的背景顏色。 currentFindMatchHighlight：與搜索匹配的當前區域的背景顏色。

findRangeHighlight ：選擇用於搜索的區域的背景顏色。

linkForeground ：鏈接的顏色。

activeLinkForeground ：活動鏈接的顏色。

hoverHighlight ：懸停時的背景顏色。

referenceHighlight ：查找所有引用時referenceHighlight背景顏色。

guide ：顯示guide顏色以指示嵌套級別。

您可以在此處找到包含自定義設置的VS Code主題示例。

創作一個主題是相當棘手的，因為語法的表現有點不同。 嘗試遵循TextMate約定並避免在主題中使用特定於語言的規則，因為語法也可以被擴展替換。

Answer 2

這是VS代碼的功能請求： https ： //github.com/Microsoft/vscode/issues/784

回答你的問題：

1. 是。
2. 您可以向項目提交Pull Request，從而使其他人受益！ 您要修改的代碼在這里 ， 您可以在這里做出貢獻 。

Answer 3

您可以更改“顏色主題”以突出顯示 VS Code 中的 HTML 實體。 轉到 Preferences -> Color Theme 並選擇另一個主題- 例如“ Light+（默認亮） ”或“ Dark+（默認暗） ”以突出顯示 HTML 實體。