Ändern / Hinzufügen der Syntaxhervorhebung für eine Sprache in Sublime 2/3

94

Ich möchte die Syntaxhervorhebung für eine Sprache in Sublime 2/3 ändern / hinzufügen.

Zum Beispiel möchte ich das Schlüsselwort thisin JavaScript farbig.

Wie kann ich das machen?

Ich weiß, dass es eine bevorzugte JavaScript-Datei gibt C:\Program Files\Sublime Text 3\Packages, aber ich weiß nicht, was ich ändern soll oder ob ich irgendwo in diesem Ordner eine neue JavaScript-Einstellungsdatei erstellen muss %APPDATA%\Sublime Text 3.

Niklas
quelle

Antworten:

95

Die Syntaxhervorhebung wird durch das von Ihnen verwendete Thema gesteuert, auf das über zugegriffen werden kann Preferences -> Color Scheme. Themen heben verschiedene Schlüsselwörter, Funktionen, Variablen usw. mithilfe von Bereichen hervor, die durch eine Reihe regulärer Ausdrücke definiert sind, die in einer .tmLanguageDatei im Verzeichnis / Paket einer Sprache enthalten sind. Beispielsweise weist die JavaScript.tmLanguageDatei die Bereiche source.jsund variable.language.jsdas thisSchlüsselwort zu. Da Sublime Text 3 das .sublime-packageZip-Dateiformat verwendet, um alle Standardeinstellungen zu speichern, ist es nicht sehr einfach, die einzelnen Dateien zu bearbeiten.

Leider enthalten nicht alle Themen alle Bereiche, sodass Sie mit verschiedenen Themen herumspielen müssen, um einen zu finden, der gut aussieht und Ihnen die gewünschte Hervorhebung bietet. Es gibt eine Reihe von Themen, die in Sublime Text enthalten sind, und viele weitere sind über Package Control verfügbar. Ich empfehle dringend, sie zu installieren, wenn Sie dies noch nicht getan haben. Stellen Sie sicher, dass Sie den Anweisungen von ST3 folgen .

Zufällig habe ich das Neon Color Schemeüber Package Control verfügbare entwickelt , das Sie sich vielleicht ansehen möchten. Mein Hauptziel war es, neben dem Versuch, ein breites Spektrum an Sprachen so gut wie möglich aussehen zu lassen, so viele verschiedene Bereiche wie möglich zu identifizieren - viel mehr, als in den Standardthemen enthalten sind. Die JavaScript-Sprachdefinition ist zwar nicht so gründlich wie die von Python, weist jedoch Neonimmer noch eine viel größere Vielfalt auf als einige der Standardeinstellungen wie Monokaioder Solarized.

jQuery mit Neon Theme hervorgehoben

Ich sollte beachten, dass ich Better JavaScriptfür dieses Bild die Sprachdefinition von @ int3h anstelle der mit Sublime gelieferten verwendet habe . Es kann über Package Control installiert werden.

AKTUALISIEREN

In letzter Zeit habe ich eine andere Definition der JavaScript-Ersatzsprache entdeckt - JavaScriptNext - ES6 Syntax. Es hat mehr Bereiche als das Basis-JavaScript oder sogar besseres JavaScript. Es sieht so aus im selben Code:

JavaScriptNext

Seit ich diese Antwort ursprünglich geschrieben habe, hat @skuroda PackageResourceViewerüber Package Control veröffentlicht. Sie können Teile oder ganze .sublime-packagePakete nahtlos anzeigen, bearbeiten und / oder extrahieren . Wenn Sie möchten, können Sie die in Sublime enthaltenen Farbschemata direkt bearbeiten.

EIN ANDERES UPDATE

Mit der Veröffentlichung fast aller Standardpakete auf Github haben sich die Änderungen schnell und rasant vollzogen. Die alte JS-Syntax wurde komplett neu geschrieben, um die besten Teile der JavaScript Next ES6-Syntax zu enthalten. Sie ist jetzt so vollständig ES6-kompatibel wie möglich. Eine Menge anderer Änderungen wurden vorgenommen, um Eck- und Kantenfälle abzudecken, die Konsistenz zu verbessern und sie insgesamt zu verbessern. Die neue Syntax wurde in den (zu diesem Zeitpunkt) neuesten Dev Build 3111 aufgenommen.

Wenn Sie eine der neuen Syntaxen mit dem aktuellen Beta-Build 3103 verwenden möchten, klonen Sie einfach das Github-Repo irgendwo und verknüpfen Sie die JavaScript(oder die gewünschten Sprachen) mit Ihrem PackagesVerzeichnis - finden Sie sie auf Ihrem System, indem Sie auswählen Preferences -> Browse Packages.... Dann machen Sie einfach git pullvon Zeit zu Zeit eine im ursprünglichen Repo-Verzeichnis, um alle Änderungen zu aktualisieren, und Sie können die neuesten und besten genießen! Ich sollte beachten, dass das Repo das neue .sublime-syntaxFormat anstelle des alten verwendet .tmLanguage, sodass sie nicht mit ST3-Builds vor 3084 oder mit ST2 funktionieren (in beiden Fällen sollten Sie sowieso auf die neueste Beta oder Dev-Version aktualisiert haben).

Ich optimiere derzeit mein Neonfarbschema, um alle neuen Bereiche in der neuen JS-Syntax zu behandeln, aber die meisten sollten bereits behandelt werden.

MattDMo
quelle
Ich habe die Paketsteuerung und Ihr besseres JavaScript installiert. Wie kann ich das Schema auf Ihr einstellen? Es ist nicht unter Farbschema aufgeführt.
Niklas
Haben Sie "Neon Theme" auch über Package Control installiert? Sobald Sie haben, gehen Sie zu Preferences -> Color Scheme -> Neon Themeund wählen Sie Neon.
MattDMo
1
Wenn Sie Pakete über Package Control installieren, werden sie in diesem Fall automatisch an der richtigen Stelle gespeichert %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Durch Auswahl der Menüoption oben wird auch Ihre Packages\User\Preferences.sublime-settingsDatei automatisch aktualisiert .
MattDMo
@ MattDMo - wow, das war sehr gründlich. Ich versuche nur, eine Syntaxfarbe zu erstellen und die Verstärkung für ein XML-ähnliches Markup zu bearbeiten. Aber ich habe einige Probleme damit, herauszufinden, wie ich mit etwas Supereinfachem anfangen kann. Wo könnte ich anfangen, entweder ein Reverse Engineering durchzuführen oder, noch besser, ein Tutorial zum Erstellen eines solchen zu erhalten?
Timothy T.
1
@ nmz787 Wenn Sie nur die .sublime-syntaxDatei möchten , laden Sie sie einfach herunter und kopieren Sie sie in ~/.config/sublime-text-3/Packages/User. Es ist dann im Syntaxmenü ganz unten rechts im Sublime-Fenster verfügbar, entweder allein (es heißt "SystemVerilog") oder im UserUntermenü, abhängig von Ihrem Setup. Wenn Sie das gesamte Paket möchten, stellen Sie sicher, dass Package Control korrekt installiert wurde, öffnen Sie die Befehlspalette, geben Sie pci ein , drücken Sie die Eingabetaste, suchen Sie nach SystemVerilogund drücken Sie die Eingabetaste. Sie sollten keine Dateien oder ähnliches umbenennen müssen - warum haben Sie das getan?
MattDMo
31

Ich habe endlich einen Weg gefunden, die gegebenen Themen anzupassen.

Gehe zu C:\Program Files\Sublime Text 3\Packagesund kopiere + benenne Color Scheme - Default.sublime-packageum Color Scheme - Default.zip. Entpacken Sie es anschließend und kopieren Sie das Thema, zu dem Sie wechseln möchten %APPDATA%\Sublime Text 3\Packages\User. (In meinem Fall All Hallow's Eve.tmTheme).

Dann können Sie es mit einem beliebigen Texteditor öffnen und etwas ändern / hinzufügen, beispielsweise zum Ändern thisin JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Dies wird thisin JavaScript-Dateien rot markiert . Sie können Ihr Thema unter auswählen Preferences -> Color Scheme -> User -> <Your Name>.

Niklas
quelle
1
Ja, dies ist die klobige Lösung, an die wir uns alle gewöhnen müssen, wenn wir uns der schönen neuen Welt von Sublime Text 3 nähern. Ich bin sicher, dass es bald Plugins geben wird, die eine viel einfachere .sublime-packageBearbeitung ermöglichen ...
MattDMo
9
Das Plugin ist da - es heißt PackageResourceViewerund kann über Package Control installiert werden. Dies .sublime-packageerleichtert die Arbeit mit Sublime Text 3- Dateien erheblich. Ich kann es nur empfehlen, wenn Sie eine Anpassung von ST3 planen.
MattDMo
1
Wo haben Sie die Referenz für diese Regeln gefunden?
Qodeninja
2
^ Was sie gesagt haben. Ich verstehe auch nicht, wann / wo Sie das Schlüsselwort "this" im Code "auswählen", warum dies nur das Schlüsselwort "this" färbt. Kannst du es bitte erklären?
Zelphir Kaltstahl
16

Verwenden Sie das über Package Control installierte PackageResourceViewer- Plugin (wie von MattDMo erwähnt ). Auf diese Weise können Sie die komprimierten Ressourcen überschreiben, indem Sie sie einfach in Sublime Text öffnen und die Datei speichern. Es werden automatisch nur die bearbeiteten Ressourcen in% APPDATA% / Roaming / Sublime Text 3 / Packages / oder ~ / .config / sublime-text-3 / Packages / gespeichert.

Führen Sie den PackageResourceViewer: Open ResourceBefehl aus , sobald das Plugin installiert ist . Wählen Sie dann JavaScriptgefolgt von JavaScript.tmLanguage. Dadurch wird eine XML-Datei im Editor geöffnet. Sie können jede der Sprachdefinitionen bearbeiten und die Datei speichern. Dadurch wird eine Überschreibungskopie der Datei JavaScript.tmLanguage in das Benutzerverzeichnis geschrieben.

Dieselbe Methode kann verwendet werden, um die Sprachdefinition einer beliebigen Sprache im System zu bearbeiten.

Chawkinsuf
quelle
Ich sehe dort nichts über Farben. Ihre Antwort war jedoch die, die ich am ehesten brauchte. Stattdessen habe ich Monokai.tmTheme gemäß diesem Beitrag im SublimeText-Forum bearbeitet, damit die Hervorhebung der JSON-Syntax funktioniert.
jmort253
1
Die spezifischen Anweisungen in dieser Antwort betrafen die Bearbeitung der Sprachdefinition. Auf diese Weise können Sie die Farben eines Farbschemas zwar nicht direkt bearbeiten, aber Sie können ändern, wie bestimmte Arten von Bereichen gefunden werden und wie das Farbschema die Sprache interpretiert (und färbt). Das Plugin öffnet jede Art von Ressource in Sublime, sodass Sie die Farbschemata auf ähnliche Weise direkt mit demselben Werkzeug bearbeiten können. Zum Beispiel mag ich das Farbschema von Tomorrow Night, also würde ich Tomorrow-Night.tmTheme mit diesem Plugin öffnen, um dieses Farbschema zu bearbeiten.
Chawkinsuf
5

Das "dies" ist bereits in Javascript eingefärbt.

Ansicht-> Syntax-> und wählen Sie Ihre Sprache zum Hervorheben aus.

Epirocks
quelle
Genau das, wonach ich gesucht habe: View -> Syntax -> Open all with current extension as...zB *.stanDateien mit C ++ - Syntaxfärbung einstellen .
BoltzmannBrain
0

Das ist mein Rezept

Hinweis: Dies ist nicht genau das, was OP verlangt. Mithilfe dieser Anweisungen können Sie die Farben von Elementen (Kommentare, Schlüsselwörter usw.) ändern, für die Syntaxabgleichsregeln definiert sind. Verwenden Sie diese Anweisungen beispielsweise, um zu ändern, dass alle Codekommentare blau statt grün gefärbt sind.

Ich glaube, das OP fragt, thiswie ein Element definiert werden soll, das gefärbt werden soll, wenn es in einer JavaScript-Quelldatei gefunden wird.

  1. Paket installieren: PackageResourceViewer

  2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (oder welches Farbschema Sie auch verwenden)

  3. Der obige Befehl öffnet eine neue Registerkarte für die Datei " Marina.sublime-color-scheme".

    • Für mich befand sich diese Datei in meinem Roaming-Profil %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
    • Wenn ich jedoch in Windows Explorer zu diesem Pfad navigiere , ist [ Color Scheme - Default] kein untergeordnetes Verzeichnis von [ Packages] Verzeichnis. Ich vermute, dass PackageResourceViewerdies eine Virtualisierung bewirkt.

optionaler Schritt: Auf der neuen Registerkarte Farbschema: Ctrl+Shift+P> [ Set Syntax: JSON]

  1. Suchen Sie nach der Regel, die Sie ändern möchten. Ich wollte Kommentare sichtbar machen, also suchte ich nach " Comment"

    • Ich habe es in der "rules"Sektion gefunden
 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },
  1. Suchen Sie nach der Zeichenfolge "blue6":, um den Abschnitt mit den Definitionen der Farbvariablen zu finden. Ich habe es in der "variables"Sektion gefunden.

  2. Wählen Sie eine neue Farbe mit einem Tool wie http://hslpicker.com/ .

  3. Definieren Sie entweder eine neue Farbvariable oder überschreiben Sie die Farbeinstellung für blue6.

    • Warnung: Das Überschreiben blue6wirkt sich auf alle anderen Textelemente in diesem Farbschema aus, die ebenfalls blue6 verwenden ("Interpunktion" "" Accessor ").
  4. Speichern Sie Ihre Datei. Die Änderungen werden sofort auf alle geöffneten Dateien / Registerkarten angewendet.

ANMERKUNGEN

Sublime kann mit jedem dieser Farbstile umgehen. Möglicherweise mehr.

hsla = Farbton, Sättigung, Helligkeit, Alpha rgba = Rot, Grün, Blau, Alpha

hsla (151, 100%, 41%, 1) - letzter Parameter ist die Alpha-Stufe (Transparenz) 1 = undurchsichtig, 0,5 = halbtransparent, 0 = volltransparent

hsl (151, 100%, 41%) - kein Alphakanal

rgba (0, 209, 108, 1) - rgb mit einem Alpha-Kanal

rgb (0, 209, 108) - kein Alphakanal

Walter Stabosz
quelle