Atom, dieses "ma?gefertigbare Texteditor" des 21. Jahrhunderts ist die erste Wahl für Tausende von Entwicklern auf der ganzen Welt. Es ist leicht zu erweitern und anzupassen macht es popul?r. Entwickler teilen neue Funktionen mit der Atom -Community, indem sie Expansionspakete und Themen ver?ffentlichen. Nach dem Lesen dieses Artikels k?nnen Sie Ihr eigenes Atom -Grammatik -Thema ver?ffentlichen - ein ausgezeichneter erster Schritt, um sich auf Ihre Atom -Anpassungsreise zu befassen!

kurze überprüfung der Schlüsselpunkte

• Atom ist ein anpassbarer Texteditor, mit dem Entwickler ihre eigenen Syntax -Themen mit CSS erstellen und freigeben k?nnen.
• Erstellen Sie ein Syntax -Thema. Sie müssen zun?chst den Atom -Texteditor herunterladen und dann mit der Funktion der automatischen Generation ein Syntax -Themenpaket erstellen.
• Atom verwendet weniger (ein Superset of CSS), um Funktionen wie Variablen, verschachtelte Stile und und Operatoren zu stylen. Laden Sie nach dem ?ndern des Themas das Atomfenster neu, um den Effekt anzuzeigen.
• Nachdem das Thema erstellt und verfeinert wurde, kann es über den Atom Package Manager (APM) mit der Atom -Community geteilt werden.

Was ist ein grammatikalisches Thema?

Syntax -Thema wird verwendet, um Text-/Codebereiche im Editor zu stylen. Das Schnittstellenthema wird verwendet, um andere Aspekte des Atomtexteditors (z. B. Seitenleiste, Statusleiste, Registerkarte usw.) festzulegen. Dieser Artikel konzentriert sich nur auf die Erstellung von Grammatikthemen, sondern nur über das Grundkenntnis von CSS.

Anf?ngerhandbuch

Laden Sie einfach den Atom -Texteditor herunter und starten Sie! Atom verwendet weniger, was ein Superset von CSS mit bequemen Merkmalen wie Variablen ist.

Atom -Grammatik -Themenpaket

generieren

Erstellen eines grammatikalischen Thema

Atom ?ffnen und CMD Shift P (unter Verwendung von Strg Shift P für Windows) drücken.
ENTERATE ERGANGE.
W?hlen Sie die Option "Paketgenerator: Syntax -Thema generieren".

Atom fordert Sie auf, den Ort zu w?hlen, an dem Sie das Paket speichern k?nnen. Sie k?nnen nach m?chten.

Nennen Sie Ihre Tasche

Atom ?ffnet das generierte Paket als Projekt und Sie k?nnen mit dem Bearbeiten beginnen. Atom empfiehlt, dass Paketnamen mit "-Syntax" enden und unter Verwendung von Kleinbuchstaben und Bindestrichen genannt werden. Zum Beispiel habe ich mein Paket

benannt und es auf das blaue Thema gesetzt. blue-everywhere-syntax

Paketstruktur

Die automatisch erzeugte Paketstruktur ist klar und leicht zu verstehen:

Das Hauptstilblatt befindet sich in
• . index.less
Der Grundstil befindet sich in
• und die Farbdefinition befindet sich in styles/base.less. styles/colors.less
• Dateien werden verwendet, um den Namen, die Beschreibung und andere Metadaten des Pakets zu definieren. package.json
• Datei beschreibt Ihr Thema im Markdown -Format. Wenn Sie ein Thema ver?ffentlichen, wird diese Readme auf der Download -Seite angezeigt. README.md

Code -Beispiel Die Rendering-Engine von

Atom basiert auf Chrom (das Verstehen von Elektronen bietet Ihnen ein ausführliches Verst?ndnis für die Funktionsweise), sodass Sie CSS für Stileinstellungen verwenden k?nnen. Atom verwendet weniger, was bequeme Merkmale wie Variablen und verschachtelte Importe aufweist.

Um den ?nderungseffekt anzuzeigen, laden Sie einfach das Atom neu (unter Verwendung von CMD Alt Strg l oder "View" & gt; "Entwickler" & gt; "Reload"). Setzen Sie in Atom -Einstellungen (CMD,) & GT; "Thema" das Syntax -Thema des Editors auf das neu erstellte Thema.

Setzen Sie das Thema auf blau

?ffnen Sie die colors.less -Datei (styles & gt; colors.less). Sie k?nnen eine Variable namens @very-dark-gray mit einem Wert von #1d1f21 sehen. ?ndern Sie es in dunkelblau #1d1f33. Neu laden Atom (CMD ALT Strg l oder "View" & gt; "Entwickler" & gt; "Reload"). Die Hintergrundfarbe des Textbereichs h?tte ge?ndert werden müssen.

Detaillierter Code Erl?uterung

index.less import base.less. base.less ?hnlich wie CSS wird die weniger variable (beginnend mit dem Symbol @) verwendet.

Hintergrundfarbe des Editors wird durch den folgenden Code definiert:

@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}

@syntax-background-color Definition in syntax-variables.less:

@import "colors";

// ...

@syntax-background-color: @very-dark-gray;

@very-dark-gray ist in colors.less definiert, weshalb wir den Wert colors.less in @very-dark-gray so ?ndern, dass die Farbe des Editor -Hintergrunds ge?ndert wird.

Style Sheet Organization

Wie Stilblattvariablen organisiert werden, h?ngt von der pers?nlichen Pr?ferenz ab. Die automatisch generierte Vorlage von Atom empfiehlt, Elemente mit derselben Farbe unter Verwendung von Syntaxvariablen in base.less zu gruppieren und jeder Variablen in syntax-variables.less Werte zuweisen. Die Farbe kann aber auch direkt in base.less definiert werden.

erweitertes Stil

Neben Variablen und Importen hat weniger einige andere Funktionen:

1. verschachtelter Stil
2. & Operator

verschachtelter Stil

weniger unterstützt verschachtelte Stile. Zum Beispiel:

.container {
  .red-block {
    a {
      color: red;
    }
  }
}

Dies entspricht:

a.container .red-block {
  color: red;
}

& operator

Der

& operator vereinfacht den übergeordneten Selektor.

blau variabler Name

Stellen Sie alle Variablennamen auf dunkelblau ein und fügen Sie Unterstriche hinzu, wenn Sie schweben:

Atom fügt automatisch .variable Klassen zu allen Variablen im Code -Editor hinzu. Daher müssen wir den Stil der .variable Klasse ?ndern:

.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}

aktuelle Zeilennummer

Stellen Sie die aktuelle Zeilennummer auf Blau ein:

add colors.less in @deep-sky-blue: #009ACD;. Verwenden Sie diese Farbe in base.less:

.gutter {
  // ...

  .line-number {
    &.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: lighten(@deep-sky-blue, 10%);
    }

    &.cursor-line-no-selection {
      color: @deep-sky-blue;
    }
  }
}

Zusammenfassung

Mit einfachen Beispielen und CSS -Grundlagen haben wir ein brandneues Atomsyntax -Thema erstellt. Sie k?nnen Ihr Thema kontinuierlich verbessern und es mit der Welt über Atom Package Manager (APM) teilen.

Ressourcen

1. Farbbetriebsfunktion in weniger
2. ATOM -Themen
ver?ffentlichen
3. Atom -Benutzerhandbuch

FAQ

(Der FAQ-Abschnitt im Originaltext wird hier weggelassen, da diese Fragen nicht mit den pseudooriginalen Zielen des Themas übereinstimmen und l?nger sind.)

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr eigenes Atom -Thema mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!