Erstellen Sie Ihr eigenes Atom -Thema mit CSS

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:

<code class="language-less">@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}</code>

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

<code class="language-less">@import "colors";

// ...

@syntax-background-color: @very-dark-gray;</code>

@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:

<code class="language-less">.container {
  .red-block {
    a {
      color: red;
    }
  }
}</code>

Dies entspricht:

<code class="language-less">a.container .red-block {
  color: red;
}</code>

& 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:

<code class="language-less">.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}</code>

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:

<code class="language-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;
    }
  }
}</code>

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!