CSSで独自のAtomテーマを構築します

Atom、この21世紀の「カスタム可能なテキストエディター」は、世界中の何千人もの開発者にとって最初の選択肢となっています。拡張とカスタマイズが簡単になり、人気があります。開発者は、拡張パッケージとテーマをリリースすることにより、Atomコミュニティと新機能を共有します。この記事を読んだ後、あなた自身のAtom Grammarテーマを公開することができます。これは、Atomカスタマイズの旅に着手するための優れた最初のステップです！

キーポイントの短いレビュー

• Atomは、開発者がCSSを使用して独自の構文テーマを作成および共有できるようにするカスタマイズ可能なテキストエディターです。
• 構文テーマを作成すると、最初にAtom Text Editorをダウンロードしてから、自動生成関数を使用してSyntaxテーマパッケージを作成する必要があります。
• Atomは、変数、ネストされたスタイル、演算子などの関数を含む、スタイルを使用するために少ない（CSSのスーパーセット）を使用します。テーマを変更した後、Atomウィンドウをリロードして効果を表示します。
• テーマが作成され、洗練された後、Atom Package Manager（APM）を介してAtomコミュニティと共有できます。

文法的なテーマとは何ですか？

構文テーマは、エディターのテキスト/コード領域のスタイルに使用されます。インターフェイステーマは、Atom Text Editorの他の側面（サイドバー、ステータスバー、タブなど）を設定するために使用されます。この記事は、文法のトピックの作成にのみ焦点を当てており、CSSの基本的な知識を持っているだけです。

初心者向けガイド

Atom Text Editorをダウンロードして開始してください！ Atomはより少ない使用を行います。これは、変数などの便利な機能を備えたCSSのスーパーセットです。

Atom Grammarテーマパッケージを生成します

文法テーマを作成することは退屈なタスクでしたが、Atomには強力な自動生成機能が組み込まれています。

Atomを開いてCMD Shift P（WindowsにCtrl Shift Pを使用）を押します。
generateを入力します。
「パッケージジェネレーター：構文テーマを生成する」オプションを選択します。

Atomは、パッケージを保存する場所を選択するように求められます。好きなように選択できます。

バッグの名前

Atomはプロジェクトとして生成されたパッケージを開き、編集を開始できます。 Atomは、パッケージ名が「-syntax」で終わることを推奨し、小文字とハイフンを使用して名前を付けます。たとえば、私は自分のパッケージに名前を付けて、それを青いテーマに設定します。

blue-everywhere-syntax

パッケージ構造

自動生成されたパッケージ構造は明確で理解しやすいです：

メインスタイルのシートは

にあります。
• index.less基本的なスタイルは
にあり、色の定義は
• にあります。 styles/base.less styles/colors.less
ファイルは、パッケージの名前、説明、その他のメタデータを定義するために使用されます。
• package.json
ファイルは、トピックがマークダウン形式で説明されています。トピックを公開すると、このREADMEはダウンロードページに表示されます。
• README.md

コードの例

AtomのレンダリングエンジンはChromiumに基づいています（電子を理解することで、どのように機能するかを深く理解することができます）。そのため、スタイル設定にCSSを使用できます。 Atomはより少ない使用であり、変数やネストされたインポートなどの便利な機能を備えています。

変更効果を確認するには、原子をリロードするだけです（CMD Alt Ctrl Lまたは「View」＆gt; "Developer"＆gt; "Reload"を使用）。 Atom Settings（CMD、）＆GT; "Theme"で、エディターの構文テーマを新しく作成したテーマに設定します。

テーマを青に設定します

colors.lessファイルを開きます（styles＆gt; colors.less）。 @very-dark-grayの値を持つ#1d1f21という名前の変数を見ることができます。ダークブルーに変更します#1d1f33。リロード原子（CMD Alt Ctrl Lまたは「View」＆gt; "Developer"＆gt; "reload"）。テキスト領域の背景色が変更されている必要があります。

詳細なコードの説明

index.lessImportbase.less。 base.less CSSと同様に、変数が少ない（@シンボルから始まる）が使用されます。

編集者の背景色は次のコードで定義されています。

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

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

の定義@syntax-background-color：syntax-variables.less

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

// ...

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

は@very-dark-grayで定義されているため、colors.lessの値を変更して、エディターの背景色を変更します。 colors.less @very-dark-gray

スタイルシート組織

スタイルシート変数がどのように編成されるかは、個人的な好みに依存します。 Atomの自動生成テンプレートは、同じ色のアイテムのグループ化を推奨して、

の構文変数を使用し、

の各変数に値を割り当てます。ただし、色はbase.lessで直接定義することもできます。 syntax-variables.less base.less

高度なスタイル

変数とインポートに加えて、他のいくつかの機能がいくつかあります。

ネストされたスタイル

＆operator
2. ネストされたスタイル

ネストされたスタイルをサポートしません。たとえば、

これは次のとおりです

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

＆operator

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

＆オペレーターは、親セレクターを簡素化します。

ブルー変数名

すべての変数名をダークブルーに設定し、ホバリング時にアンダースコアを追加します： Atomは、コードエディター内のすべての変数に

クラスを自動的に追加します。したがって、

クラスのスタイルを変更する必要があります。

.variable現在の行番号.variable

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

現在の行番号を青に設定します：

in

を追加します。

：

でこの色を使用してください

colors.less@deep-sky-blue: #009ACD;概要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>

簡単な例とCSSの基本を使用して、新しいAtom Syntaxテーマを作成しました。テーマを継続的に改善し、Atom Package Manager（APM）を通じて世界と共有できます。

リソース

1. より少ない
での色操作関数
2. アトムテーマを公開
3. ATOMユーザーマニュアル

faq

（元のテキストのFAQセクションは、これらの質問がトピックの擬似オリジナルの目標と一致せず、より長いため、ここでは省略されています。）

以上がCSSで独自のAtomテーマを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。