Visual Studio Code: Syntaxhervorhebung für HTML und CSS mit dem Farbschema von Brackets

Visual Studio Code ist mein Standardeditor, und in diesem Beitrag beschreibe ich, wie man dem hellen Standard-Theme von Visual Studio Code das von Brackets verwendete Farbschema zur Syntaxhervorhebung von HTML und CSS verpasst. Probieren Sie es einfach einmal. Sieht gut aus und geht nicht schwer!

Code ist ein toller Editor, aber das Farbschema von Brackets ist angenehmer

Das im Standarddesign Hell (Visual Studio) verwendete Syntax-Highlighting für HTML (und CSS) gefällt mir nicht:

  • Die Namen der Elemente erscheinen in Braun.
  • Die Attribute sind in einem ziemlich grellen Rot.
  • Das Blau für die Werte ist mir zu kräftig.
  • Kommentare in Grün sind für meinen Geschmack viel zu prominent.

Alles in allem empfinde ich die Syntaxhervorhebung des Standarddesigns nicht als angenehm.

Visual Studio Code mit dem hellen Standardtheme
Hell (Visual Studio) – das helle Standarddesign

Bei Brackets hingegen habe ich eigentlich nie über das Syntax Highlighting nachgedacht. Irgendwie passte dort alles gut zusammen:

  • Elemente erscheinen in einem dezenten Blau.
  • Attribute haben einen hübschen Grünton.
  • Werte kommen in einem deutlichen Orange daher.
  • Kommentare sind ein einem unauffälligen Grau gehalten.
Der Editor Brackets mit Standardtheme
Brackets – das Standardtheme

Da man mit einem Editor ja doch einige Stunden seines Lebens verbringt, habe ich mich auf die Suche nach einem entsprechenden Theme gemacht. Im Marketplace von Code gibt es zwar Themes, die sich laut Beschreibung an Brackets anlehnen, aber auch die gefielen mir alle nicht so richtig.

Letztlich habe ich also beschlossen, es selbst zu versuchen. Ich hatte zwar keine Ahnung, wie man ein Theme für Code anpasst, aber die Dokumentation war brauchbar, und letztlich war es einfacher als gedacht.

Das Farbschema von Brackets

Zunächst habe ich die Werte für das Brackets-Farbschema gesucht, und sie in der Less-Datei für das helle Brackets-Standardtheme auf Github gefunden:

  • Das Blau für HTML-Elementnamen: #446fbd
  • Das Grün für Attribute: #6d8600
  • Das Orange für deren Werte: #e88501
  • Das Dunkelgrau für den Text: #535353
  • Das Lila für CSS-Eigenschaften: #8757ad
  • Das Mittelgrau für Kommentare und Zeilennummern: #949494
  • Das Dunkelgrau für die Aktivitätsleiste links: #47484b
  • Das Hellgrau für die Statuszeile unten: #f5f5f5

Es gibt noch ein paar mehr Farben, aber das war auf jeden Fall schon mal ein guter Anfang.

Die farbliche Anpassung von Themes in VS Code

Die gewünschten Farbwerte werden in der settings.json von VS Code gespeichert. Die genaue Syntax dazu findet man in der ziemlich guten Dokumentation von Code. Die farbliche Anpassung selbst besteht aus zwei Teilen:

  • Arbeitsbereich des Editors (workbench.colorCustomizations)
  • Syntax-Highlighting für HTML und CSS (editor.tokenColorCustomizations)

Den zur Anpassung von mir erstellten JSON-Code habe ich in einem Gist auf Github veröffentlicht.

Schritt für Schritt: Make Visual Studio Code look like Brackets

Falls Sie es ausprobieren möchten – hier ist die Schritt-für-Schritt-Anleitung:

  1. Gist – Make VS Code look like Brackets im Browser aufrufen.
  2. Den JSON-Code aus dem Github Gist in die Zwischenablage kopieren (oder in einer Datei speichern).

Wenn Sie den JSON-Code in der Zwischenablage haben, geht es weiter in Visual Studio Code:

  1. In Visual Studio Code das helle Standard-Theme aktivieren:
    • Befehlspalette aufrufen (z. B. mit F1):
    • Einstellungen: Farbdesign - Theme Hell (Visual Studio)
  2. Die Datei settings.json im Editor öffnen:
    • Befehlspalette aufrufen (z. B. mit F1)
    • Einstellungen: Einstellungen öffnen (JSON)
  3. Den aus dem Gist kopierten Code in der settings.json einfügen, und zwar nach der bereits vorhandenen öffnenden geschweiften Klammer.
Der JSON-Code aus dem Giithub Gist in der settings.json von VS Code
Der JSON-Code aus dem Gist in der settings.json von Visual Studio Code

Nach diesen Schritten sollte Visual Studio Code bei Ihnen so aussehen wie Brackets.

Alles, was in dem JSON-Code aus dem Gist nicht explizit definiert wurde, übernimmt Code nach wie vor vom Standard-Theme. Fast wie in CSS mit dem Browser-Stylesheet…

Fazit: Visual Studio Code mit dem Farbschema von Brackets

Die folgende Abbildung zeigt eine CSS-Datei mit dem Farbschema von Brackets.

Eine CSS-Datei in Visual Studio Code mit dem Farbschema von Brackets
Eine CSS-Datei in Visual Studio Code mit dem Farbschema von Brackets

Falls Sie es ausprobieren möchten, wünsche ich Ihnen viel Spaß dabei!

Schreiben Sie einen Kommentar