Wie kann ich HTML-Entity-Hervorhebung in VS-Code aktivieren?

Question

Auf der Seite VS Code UserVoice, there was a request, um Vorschläge und Hervorhebung für HTML-Entitäten wie & hinzuzufügen. Microsoft hat dies mit einem Kommentar abgeschlossen, der besagt "Diese Funktion wurde in Visual Studio 2013 für HTML- und Razor-Dokumente implementiert." Ich nehme an, das bedeutet, dass es in VS 2013 implementiert wurde, aber nicht VS-Code.

Angenommen, das ist richtig, wie kann ich Hervorhebung für diese Elemente in HTML-Dokumenten hinzufügen? Sie scheinen in XML-Dokumenten richtig hervorzuheben. Wenn man sich Syntax/html.plist anschaut, sieht es so aus, als sollte es HTML-Entities erfassen. Ich würde also annehmen, dass das Theme sie entsprechend farbig darstellen würde, aber ich verstehe nicht wirklich, wie es im Backend funktioniert.

Meine Fragen sind:

1. Sollte VS-Code diese Elemente hervorheben?

2. Wenn nicht, kann ich die HTML-Syntaxdatei oder die Themadatei ändern, um dies zu tun? Wenn ja, wie würde ich das tun?

Hier ist html.plist (was der Standard ist, wie es installiert ist):

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

Hier einige Screenshots zu klären, was ich meine (beide mit gleichem Thema genommen):

XML.plist sieht HTML.plist sehr ähnlich aus, wenn es um diese Entitäten geht, aber ich werde XML.plist nicht zu dieser bereits langwierigen Frage hinzufügen, es sei denn, jemand hat keine eigene Kopie und will es.

Answer 1

Dies ist ein Feature-Request für VS-Code: https://github.com/Microsoft/vscode/issues/784

beantworten Ihre Fragen:

1. Ja.
2. Sie können eine Pull-Anforderung an das Projekt senden, was allen anderen zugute kommt! Der Code, den Sie ändern möchten, ist here und here's how you can contribute. mit VS-Code des Yeoman Erweiterung Generator, yo Code

Answer 2

Sie können es Erweiterungen tun

Sie können Ihre VS-Code Installation neuer Textmate Thema Dateien (.tmTheme) hinzuzufügen. Der Erweiterungsgenerator verwendet eine vorhandene TextMate-Designdatei und packt sie für die Verwendung in VS-Code.

In ColorSublime stehen Hunderte von vorhandenen TextMate-Designs zur Auswahl. Wählen Sie ein Thema, das Ihnen gefällt, und kopieren Sie den Download-Link, um ihn im Yeoman-Generator zu verwenden. Es wird in einem Format wie "http://colorsublime.com/theme/download/(number)" sein. Der 'Code'-Generator fordert Sie auf, den URL- oder Datei-Speicherort der .tmTheme-Datei, den Namen des Themas und andere Informationen zum Thema einzugeben.

Kopieren Sie den generierten Designordner in einen neuen Ordner unter Ihrem Ordner .vscode/extensions und starten Sie VS Code neu.

Öffnen Sie das Farbauswahl-Thema mit Datei> Einstellungen> Farbthema und Sie können Ihr Design im Dropdown-Menü sehen. Pfeil nach oben und unten, um eine Live-Vorschau Ihres Themas zu sehen.

Sie können ein Thema selbst erstellen zu

Sie können auch Ihre eigenen Textmate Themen von Grund auf Autor. Weitere Informationen finden Sie in der Dokumentation zu Textmate-Thema und Sprachgrammatik.

Neben den Textmate Sprachgrammatik Standardumfänge, VS-Code hat auch Einstellungen eigenes Thema, das Sie Ihr eigenes Thema zu stimmen können:

rangeHighlight: Hintergrundfarbe des Bereichs markiert, wie durch Schnell öffnen und finden Funktionen.

selectionHighlight: Hintergrundfarbe der Regionen, die während der Auswahl hervorgehoben werden.

inactiveSelection: Hintergrundfarbe von Auswahlen, wenn nicht im Fokus.

wordHighlight: Hintergrundfarbe eines Symbols während des Lesezugriffs, wie das Lesen einer Variablen.

wordHighlightStrong: Hintergrundfarbe eines Symbols während des Schreibzugriffs, wie Schreiben in eine Variable.

findMatchHighlight: Hintergrundfarbe der Regionen, die mit der Suche übereinstimmen. currentFindMatchHighlight: Hintergrundfarbe der aktuellen Region, die mit der Suche übereinstimmt.

findRangeHighlight: Hintergrundfarbe der für die Suche ausgewählten Regionen.

linkForeground: Farbe der Links.

activeLinkForeground: Farbe der aktiven Links.

hoverHighlight: Hintergrundfarbe beim Schweben.

referenceHighlight: Hintergrundfarbe einer Referenz beim Finden aller Referenzen.

guide: Farbe der Hilfslinien, die angezeigt werden, um Verschachtelungsebenen anzuzeigen.

Hier finden Sie ein Beispiel für ein VS-Code-Thema, das die benutzerdefinierten Einstellungen enthält.

Das Erstellen eines Themas ist ziemlich schwierig, da sich die Grammatiken ein wenig anders verhalten. Versuchen Sie, den TextMate-Konventionen zu folgen und sprachspezifische Regeln in Ihrem Thema zu vermeiden, da Grammatiken auch durch Erweiterungen ersetzt werden können.