Edytor i terminal

Motyw ustawia wygląd edytora kodu i terminala. Ustawienia powłoki, skróty klawiszowe i wcięcia należą do osobnych ustawień aplikacji.

Gotowy przykład

Zapisz poniższy dokument jako theme.jsonc w folderze reading-room, zaimportuj folder w Settings > Themes > Colors i wybierz Use theme. Ten sam plik jest w examples/reading-room. Nie wymaga dodatkowych zasobów.

{
  "version": 2,
  "name": "Reading Room",
  "appearance": "adaptive",
  "common": {
    "editor": {
      "fontFamily": "\"JetBrains Mono\", monospace",
      "fontSize": 15,
      "syntax": {
        "comment": {
          "fontStyle": "italic"
        },
        "keyword": {
          "fontWeight": 600
        },
        "link": {
          "textDecoration": "underline"
        }
      }
    },
    "terminal": {
      "fontSize": 14,
      "lineHeight": 1.3,
      "cursorStyle": "bar",
      "cursorBlink": false,
      "colors": {
        "cursor": "var(--color-primary)"
      }
    }
  },
  "light": {
    "editor": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#202020",
        "selection": "#d8e7ef"
      },
      "syntax": {
        "comment": {
          "color": "#626c72"
        }
      }
    },
    "terminal": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#202020"
      }
    }
  },
  "dark": {
    "editor": {
      "colors": {
        "background": "#14171a",
        "foreground": "#e5e9ed",
        "selection": "#344651"
      },
      "syntax": {
        "comment": {
          "color": "#929da5"
        }
      }
    },
    "terminal": {
      "colors": {
        "background": "#14171a",
        "foreground": "#e5e9ed"
      }
    }
  }
}

Komentarze są kursywą w obu trybach, ponieważ fontStyle pochodzi z common. Ich kolor zależy od light lub dark. Pominięte kolory ANSI terminala nadal korzystają z bazowej palety.

Kolory i typografia edytora

Pole w editor.colors	Zastosowanie
background, foreground	Tło obszaru kodu i zwykły tekst.
gutterBackground, gutterForeground	Tło i tekst marginesu z numerami linii.
activeLine	Aktywna linia i jej numer; w obszarze kodu kolor jest mieszany z przezroczystością.
selection	Zaznaczenie; nieaktywny edytor może wyświetlać jego przygaszoną wersję.
cursor	Karetka edytora.

fontSize jest liczbą w pikselach, np. 15, a nie tekstem "15px". fontFamily jest listą rodzin CSS. Samo wpisanie nazwy fontu go nie instaluje. Wybierz dostępny font lub dołącz go zgodnie z instrukcją zasobów.

Wysokość linii i odstępy ustawiaj tokenami --editor-line-height, --editor-content-padding i --editor-line-padding; nie są osobnymi polami editor.

Wszystkie kategorie składni

Lomi korzysta z kategorii CodeMirror/Lezer. To parser języka decyduje, do której kategorii należy dany fragment. Nie każdy język rozpoznaje wszystkie kategorie.

Nazwa	Co styluje
keyword	Słowa kluczowe, modyfikatory i operatory słowne.
string	Teksty, wyrażenia regularne, wartości atrybutów i tekst o stałej szerokości.
number	Liczby, wartości logiczne, null i atomy.
comment	Komentarze i znaczniki metadanych parsera.
type	Typy, klasy, przestrzenie nazw i nazwy znaczników.
function	Nazwy funkcji rozpoznane przez parser.
variable	Nazwy zmiennych.
property	Właściwości obiektów i nazwy atrybutów.
operator	Operatory symboliczne.
punctuation	Interpunkcja.
heading	Nagłówki dokumentów.
strong	Pogrubione fragmenty.
emphasis	Wyróżnienia tekstu.
link	Linki.
invalid	Tokeny oznaczone przez parser jako niepoprawne.

Każda kategoria przyjmuje color, fontStyle, fontWeight i textDecoration. Dozwolone wartości znajdziesz w referencji. Własny motyw bez ustawień składni otrzymuje domyślne style runtime; aby zachować dokładną składnię DeepMono, zacznij od Duplicate tego motywu. Tryb edytora dla bardzo dużych plików pomija tę warstwę podświetlania składni.

Paleta i kursor terminala

terminal.colors obejmuje tło, tekst, zaznaczenia, kursor, 16 kolorów ANSI i dekoracje wyszukiwania. cursor jest kolorem kursora, a cursorAccent tekstu pod kursorem blokowym. selectionForeground zmienia tekst zaznaczenia; jego brak pozwala zachować odziedziczone zachowanie. searchMatch* dotyczy trafień, a searchActiveMatch* aktualnego trafienia.

W edytorze motywu wybierz Load terminal presets, a następnie paletę. Pole terminal.preset wymaga dokładnej nazwy z tej listy. Najpierw ładowany jest preset, potem nakładane są jawne terminal.colors. Nieznany preset blokuje podgląd i zastosowanie motywu.

cursorWidth określa szerokość kursora typu bar. cursorInactiveStyle dotyczy terminala bez fokusu. drawBoldTextInBrightColors wpływa na sposób użycia jasnych kolorów ANSI dla pogrubionego tekstu. minimumContrastRatio może zmienić renderowany kolor tekstu, aby podnieść kontrast. Wszystkie zakresy liczb i nazwy 27 kolorów zawiera referencja terminala.

Kiedy ustawienia użytkownika mają pierwszeństwo

W Settings > Terminal użytkownik może nadpisać pojedyncze wartości wyglądu. Reset konkretnego pola przywraca jego wartość z motywu. Reset defaults resetuje ustawienia terminala szerzej, więc do sprawdzenia jednego koloru użyj resetu tego pola.

Motyw zmienia wygląd już otwartych terminali i edytorów. Nie uruchamia nowej powłoki i nie usuwa historii cofania. W podglądzie edytora motywów zmiany dotyczą tylko okna Settings; właściwy terminal sprawdź po zapisaniu i wybraniu motywu.

Źródła: editor.ts, runtime.ts, TerminalSettingsPage.tsx.