Zmień / Dodaj podświetlanie składni dla języka w Sublime 2/3

94

Chcę zmienić / dodać podświetlanie składni dla języka w Sublime 2/3.

Na przykład chcę słowo kluczowe this kolorowe w JavaScript.

Jak mogę to zrobić?

Wiem, że w programie jest plik preferencji JavaScript C:\Program Files\Sublime Text 3\Packages, ale nie wiem, co zmienić lub czy muszę utworzyć nowy plik preferencji JavaScript gdzieś w tym folderze %APPDATA%\Sublime Text 3.

syntax-highlighting sublimetext3 Niklas
źródło

Odpowiedzi:

95

Podświetlanie składni jest kontrolowane przez używany motyw, do którego można uzyskać dostęp Preferences -> Color Scheme. Motywy wyróżniają różne słowa kluczowe, funkcje, zmienne itp. Za pomocą zakresów, które są definiowane przez serię wyrażeń regularnych zawartych w .tmLanguagepliku w katalogu / pakiecie języka. Na przykład JavaScript.tmLanguageplik przypisuje zakresy source.jsi variable.language.jsdo thissłowa kluczowego. Ponieważ Sublime Text 3 używa .sublime-packageformatu pliku zip do przechowywania wszystkich domyślnych ustawień, edycja poszczególnych plików nie jest łatwa.

Niestety, nie wszystkie motywy zawierają wszystkie zakresy, więc musisz bawić się różnymi, aby znaleźć taki, który wygląda dobrze i zapewnia wyróżnienie, którego szukasz. Istnieje wiele motywów zawartych w Sublime Text, a wiele innych jest dostępnych za pośrednictwem kontroli pakietów , które bardzo polecam zainstalować, jeśli jeszcze tego nie zrobiłeś. Upewnij się, że postępujesz zgodnie ze wskazówkami ST3 .

Tak się składa, że ​​opracowałem Neon Color Scheme, dostępną za pośrednictwem Kontroli pakietów, narzędzie, któremu warto się przyjrzeć. Moim głównym celem, poza tym, że starałem się, aby szeroki zakres języków wyglądał jak najlepiej, było zidentyfikowanie jak największej liczby różnych zakresów - o wiele więcej, niż są zawarte w standardowych tematach. Chociaż definicja języka JavaScript nie jest tak dokładna, jak na przykład Python, Neonnadal ma dużo większą różnorodność niż niektóre domyślne wartości, takie jak Monokailub Solarized.

jQuery wyróżniony motywem Neon

Powinienem zauważyć, że użyłem Better JavaScriptdefinicji języka @ int3h dla tego obrazu zamiast tego, który jest dostarczany z Sublime. Można go zainstalować za pomocą kontroli pakietów.

AKTUALIZACJA

Niedawno odkryłem inną definicję języka zastępującego JavaScript - JavaScriptNext - ES6 Syntax. Ma więcej zakresów niż podstawowy JavaScript lub nawet lepszy JavaScript. Wygląda to tak na tym samym kodzie:

JavaScriptNext

Ponadto, ponieważ pierwotnie napisałem tę odpowiedź, @skuroda został wydany PackageResourceViewerza pośrednictwem kontroli pakietów. Pozwala bezproblemowo przeglądać, edytować i / lub wyodrębniać części lub całe .sublime-packagepakiety. Jeśli więc wybierzesz, możesz bezpośrednio edytować schematy kolorów zawarte w Sublime.

KOLEJNA AKTUALIZACJA

Wraz z wydaniem prawie wszystkich domyślnych pakietów na Github , zmiany nadchodziły szybko i wściekle. Stara składnia JS została całkowicie przepisana, aby uwzględnić najlepsze części składni JavaScript Next ES6, i teraz jest tak w pełni kompatybilna z ES6, jak to tylko możliwe. Wprowadzono mnóstwo innych zmian, aby zakryć przypadki narożników i krawędzi, poprawić spójność i ogólnie ją ulepszyć. Nowa składnia została uwzględniona w (w tym czasie) najnowszej kompilacji deweloperskiej 3111.

Jeśli chcesz użyć dowolnej nowej składni z obecną wersją beta 3103, po prostu sklonuj repozytorium Github w jakimś miejscu i połącz JavaScript(lub dowolny język (języki)) w swoim Packageskatalogu - znajdź go w swoim systemie, wybierając Preferences -> Browse Packages.... Następnie po prostu rób co jakiś czas git pullw oryginalnym katalogu repozytorium, aby odświeżyć wszelkie zmiany i możesz cieszyć się najnowszymi i najlepszymi! Powinienem zauważyć, że repozytorium używa nowego .sublime-syntaxformatu zamiast starego .tmLanguage, więc nie będą działać z kompilacjami ST3 wcześniejszymi niż 3084 lub z ST2 (w obu przypadkach i tak powinieneś był zaktualizować do najnowszej wersji beta lub deweloperskiej).

Obecnie poprawiam mój schemat kolorów Neon, aby obsłużyć wszystkie nowe zakresy w nowej składni JS, ale większość powinna już zostać omówiona.

MattDMo
źródło
Zainstalowałem Kontrolę pakietów i Twój Better JavaScript. Jak mogę ustawić schemat na Twój? Nie jest wymieniony w schemacie kolorów.
Niklas,
Czy zainstalowałeś również „Motyw Neon” za pomocą Kontroli pakietów? Gdy już to zrobisz, przejdź do Preferences -> Color Scheme -> Neon Themei wybierz Neon.
MattDMo,
1
Jeśli instalujesz pakiety za pomocą Kontroli pakietów, w tym przypadku są one automatycznie zapisywane we właściwym miejscu %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Wybranie powyższej opcji menu spowoduje Packages\User\Preferences.sublime-settingsrównież automatyczną aktualizację pliku.
MattDMo
@MattDMo - wow, to było bardzo dokładne. Po prostu próbuję zrobić trochę koloru składni i wzmocnić edycję dla znaczników podobnych do XML. Ale mam problem ze zrozumieniem, jak zacząć od czegoś bardzo prostego. Gdzie mógłbym rozpocząć inżynierię wsteczną lub, jeszcze lepiej, uzyskać poradnik dotyczący tworzenia takiego pliku.
Timothy T.
1
@ nmz787, jeśli chcesz tylko .sublime-syntaxplik, po prostu pobierz go i skopiuj do ~/.config/sublime-text-3/Packages/User. Będzie ona wtedy dostępna w menu składni w prawym dolnym rogu okna Sublime, samodzielnie (powie „SystemVerilog”) lub w Userpodmenu, w zależności od konfiguracji. Jeśli chcesz mieć cały pakiet, upewnij się, że Kontrola pakietów została poprawnie zainstalowana, otwórz paletę poleceń, wpisz pci , naciśnij Enter, wyszukaj SystemVerilogi naciśnij Enter. Nie powinieneś zmieniać nazw żadnych plików ani niczego - dlaczego to robisz?
MattDMo
31

W końcu znalazłem sposób na dostosowanie podanych motywów.

Idź do C:\Program Files\Sublime Text 3\Packagesi skopiuj + zmień nazwę Color Scheme - Default.sublime-packagena Color Scheme - Default.zip. Następnie rozpakuj go i skopiuj motyw, na który chcesz zmienić %APPDATA%\Sublime Text 3\Packages\User. (W moim przypadku All Hallow's Eve.tmTheme).

Następnie możesz go otworzyć w dowolnym edytorze tekstu i zmienić / dodać coś, na przykład do zmiany thisw 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>

Spowoduje to oznaczenie thisplików JavaScript na czerwono. Możesz wybrać swój motyw podPreferences -> Color Scheme -> User -> <Your Name> .

Niklas
źródło
1
tak, to jest niezgrabne obejście, do którego wszyscy musimy się przyzwyczaić, zbliżając się do nowego wspaniałego świata Sublime Text 3. Jestem pewien, że wkrótce pojawią się wtyczki, które umożliwią znacznie łatwiejszą .sublime-packageedycję ...
MattDMo
9
Ta wtyczka jest tutaj - nazywa się PackageResourceVieweri można ją zainstalować za pomocą Kontroli pakietów. Dzięki temu praca z .sublime-packageplikami Sublime Text 3 jest znacznie łatwiejsza i bardzo go polecam, jeśli planujesz dokonać jakiejkolwiek personalizacji w ST3.
MattDMo
1
Gdzie znalazłeś odniesienie do tych zasad?
qodeninja
2
^ Co powiedzieli. Nie rozumiem też, kiedy / gdzie „wybierasz” słowo kluczowe „this” w kodzie, dlaczego powoduje to tylko kolorowanie słowa kluczowego „this”. Czy możesz to wyjaśnić?
Zelphir Kaltstahl
1
oto dokumentacja Doc Text Mate Language Grammars and Sublime Text dla definicji składni
yaitloutou
16

Użyj wtyczki PackageResourceViewer zainstalowanej przez kontrolę pakietu (o czym wspomniał MattDMo ). Pozwala to zastąpić skompresowane zasoby, po prostu otwierając je w Sublime Text i zapisując plik. Automatycznie zapisuje tylko edytowane zasoby do% APPDATA% / Roaming / Sublime Text 3 / Packages / lub ~ / .config / sublime-text-3 / Packages /.

Specyficzne dla op, po zainstalowaniu wtyczki wykonaj PackageResourceViewer: Open Resourcepolecenie. Następnie wybierz, JavaScripta następnieJavaScript.tmLanguage . Spowoduje to otwarcie pliku xml w edytorze. Możesz edytować dowolne definicje języków i zapisać plik. Spowoduje to zapisanie nadpisanej kopii pliku JavaScript.tmLanguage w katalogu użytkownika.

Tej samej metody można użyć do edycji definicji języka dowolnego języka w systemie.

chawkinsuf
źródło
Nie widzę tam nic o kolorach. Jednak twoja odpowiedź była najbliższa temu, czego potrzebowałem. Zamiast tego zredagowałem Monokai.tmTheme zgodnie z tym postem na forum SublimeText , aby włączyć podświetlanie składni JSON.
jmort253
1
Konkretne instrukcje zawarte w tej odpowiedzi dotyczyły edycji definicji języka. Chociaż nie pozwala to na bezpośrednią edycję kolorów schematu kolorów, pozwoli ci zmienić sposób znajdowania określonych typów zakresów, a tym samym sposób interpretacji (i kolorów) języka przez schemat kolorów. Wtyczka otworzy dowolny typ zasobu w Sublime, dzięki czemu możesz podobnie edytować schematy kolorów bezpośrednio za pomocą tego samego narzędzia. Na przykład podoba mi się schemat kolorów Tomorrow Night, więc otworzyłbym Tomorrow-Night.tmTheme za pomocą tej wtyczki, aby edytować ten schemat kolorów.
chawkinsuf
5

„To” jest już pokolorowane w JavaScript.

Widok-> Składnia-> i wybierz język do podświetlenia.

Epirocks
źródło
Właśnie tego szukałem: View -> Syntax -> Open all with current extension as...aby ustawić np. *.stanPliki z kolorowaniem składni C ++.
BoltzmannBrain
0

To jest mój przepis

Uwaga: nie o to dokładnie pyta OP. Te instrukcje pomogą Ci zmienić kolory elementów (komentarzy, słów kluczowych itp.), Które mają zdefiniowane reguły dopasowania składni. Na przykład użyj tych instrukcji, aby zmienić, tak aby wszystkie komentarze do kodu miały kolor niebieski zamiast zielonego.

Wydaje mi się, że OP pyta, jak zdefiniować thiselement do pokolorowania, gdy zostanie znaleziony w pliku źródłowym JavaScript.

  1. Zainstaluj pakiet: PackageResourceViewer

  2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (lub jakikolwiek używany schemat kolorów)

  3. Powyższe polecenie otworzy nową kartę do pliku „ Marina.sublime-color-scheme”.

    • Dla mnie ten plik znajdował się w moim profilu mobilnym %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
    • Jeśli jednak przejdę do tej ścieżki w Eksploratorze Windows , [ Color Scheme - Default] nie jest katalogiem potomnym [ Packages] dir. Podejrzewam, że PackageResourceViewerrobi trochę wirtualizacji.

krok opcjonalny: Na nowej karcie schematu kolorów: Ctrl+Shift+P> [ Set Syntax: JSON]

  1. Wyszukaj regułę, którą chcesz zmienić. Chciałem, aby komentarze były widoczne, więc szukałem „ Comment”

    • Znalazłem to w "rules"dziale
 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },

  1. Wyszukaj ciąg, "blue6":aby znaleźć sekcję definicji zmiennych kolorów. Znalazłem to w "variables"dziale.

  2. Wybierz nowy kolor za pomocą narzędzia takiego jak http://hslpicker.com/ .

  3. Zdefiniuj nową zmienną koloru lub nadpisz ustawienie koloru dla blue6.

    • Ostrzeżenie: nadpisanie blue6wpłynie na wszystkie inne elementy tekstowe w tym schemacie kolorów, które również używają niebieskiego6 („Interpunkcja” „Akcesor”).

  4. Zapisz plik, zmiany zostaną natychmiast zastosowane do wszystkich otwartych plików / kart.

UWAGI

Sublime poradzi sobie z każdym z tych stylów kolorystycznych. Prawdopodobnie więcej.

hsla = odcień, nasycenie, jasność, alpha rgba = czerwony, zielony, niebieski, alfa

hsla (151, 100%, 41%, 1) - ostatni parametr to poziom alfa (przezroczystość) 1 = nieprzezroczysty, 0,5 = półprzezroczysty, 0 = w pełni przezroczysty

hsl (151, 100%, 41%) - brak kanału alfa

rgba (0, 209, 108, 1) - rgb z kanałem alfa

rgb (0, 209, 108) - brak kanału alfa

Walter Stabosz
źródło