Bina tema atom anda sendiri dengan CSS

Atom, abad ke -21 "Editor Teks Customable" telah menjadi pilihan pertama bagi beribu -ribu pemaju di seluruh dunia. Mudah untuk berkembang dan disesuaikan menjadikannya popular. Pemaju berkongsi ciri -ciri baru dengan komuniti Atom dengan melepaskan pakej dan tema pengembangan. Selepas membaca artikel ini, anda akan dapat menerbitkan tema tatabahasa atom anda sendiri - langkah pertama yang sangat baik untuk memulakan perjalanan penyesuaian atom anda!

Kajian ringkas mengenai mata utama

Atom adalah editor teks yang disesuaikan yang membolehkan pemaju membuat dan berkongsi tema sintaks mereka sendiri menggunakan CSS.

• Buat tema sintaks, anda perlu memuat turun editor teks atom, dan kemudian gunakan fungsi generasi automatik untuk membuat pakej tema sintaks.
• Atom menggunakan kurang (superset CSS) kepada gaya, termasuk fungsi seperti pembolehubah, gaya bersarang dan & pengendali. Selepas menukar tema, muat semula tetingkap Atom untuk melihat kesannya.
• Selepas tema dicipta dan ditapis, ia boleh dikongsi dengan komuniti atom melalui Pengurus Pakej Atom (APM).

Apakah tema tatabahasa?

Tema sintaks digunakan untuk gaya teks/kod di editor. Tema antara muka digunakan untuk menetapkan aspek lain dari editor teks atom (seperti bar sisi, bar status, tab, dan lain -lain). Artikel ini hanya memberi tumpuan kepada penciptaan topik tatabahasa, hanya mempunyai pengetahuan asas CSS.

Panduan Pemula

hanya muat turun editor teks atom dan mulakan! Atom menggunakan kurang, iaitu superset CSS dengan ciri -ciri mudah seperti pembolehubah.

menjana pakej tema tatabahasa atom

Membuat tema tatabahasa yang digunakan untuk menjadi tugas yang membosankan, tetapi sekarang Atom mempunyai ciri-ciri generasi automatik yang kuat:

Buka atom dan tekan CMD Shift P (menggunakan CTRL Shift P untuk Windows).

1. Masukkan menjana.
2. Pilih pilihan "Penjana Pakej: Menjana Tema Sintaks".
Atom akan meminta anda memilih lokasi di mana untuk menyimpan pakej, anda boleh memilih seperti yang anda suka.

Namakan beg anda

Atom akan membuka pakej yang dihasilkan sebagai projek dan anda boleh mula mengedit. Atom mengesyorkan bahawa nama pakej berakhir dengan "-syntax" dan dinamakan menggunakan huruf kecil dan tanda hubung. Sebagai contoh, saya menamakan pakej saya

dan menetapkannya kepada tema biru.

blue-everywhere-syntax

Struktur pakej

struktur pakej yang dihasilkan secara automatik adalah jelas dan mudah difahami:

Lembaran gaya utama terletak di

.
• index.less Gaya asas terletak di
dan definisi warna terletak di
• . styles/base.less styles/colors.less
Fail digunakan untuk menentukan nama, keterangan, dan metadata lain pakej.
• Fail package.json
menerangkan topik anda dalam format markdown, jika anda menerbitkan topik, bacaan ini akan dipaparkan pada halaman muat turun.
• README.md

Contoh kod

Enjin rendering Atom didasarkan pada kromium (pemahaman elektron memberi anda pemahaman yang mendalam tentang bagaimana ia berfungsi), jadi anda boleh menggunakan CSS untuk tetapan gaya. Atom menggunakan kurang, yang mempunyai ciri -ciri mudah seperti pembolehubah dan import bersarang.

Untuk melihat kesan perubahan, tambah semula atom (menggunakan CMD alt ctrl l atau "view" & gt; "pemaju" & gt; "tambah nilai"). Dalam Tetapan Atom (CMD,) & gt; "Tema", tetapkan tema sintaks editor kepada tema yang baru dibuat.

Tetapkan tema ke biru

Buka fail colors.less (styles & gt; colors.less). Anda boleh melihat pembolehubah bernama @very-dark-gray dengan nilai #1d1f21. Tukarnya menjadi Blue Dark #1d1f33. Muat semula atom (CMD alt ctrl l atau "view" & gt; "pemaju" & gt; "tambah nilai"). Warna latar belakang kawasan teks sepatutnya telah diubah.

Penjelasan kod terperinci

index.less import base.less. base.less Sama seperti CSS, pembolehubah yang kurang (bermula dengan simbol @) digunakan.

warna latar belakang editor ditakrifkan oleh kod berikut:

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

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

@syntax-background-color Definisi dalam syntax-variables.less:

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

// ...

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

@very-dark-gray ditakrifkan dalam colors.less, itulah sebabnya kita mengubah suai nilai colors.less dalam @very-dark-gray untuk menukar warna latar belakang editor.

Organisasi lembaran gaya

Bagaimana pembolehubah lembaran gaya dianjurkan bergantung kepada keutamaan peribadi. Templat yang dihasilkan oleh Atom mencadangkan item pengumpulan dengan warna yang sama, menggunakan pembolehubah sintaks dalam base.less, dan memberikan nilai kepada setiap pembolehubah dalam syntax-variables.less. Tetapi warna juga boleh ditakrifkan secara langsung dalam base.less.

gaya maju

Di samping pembolehubah dan import, kurang mempunyai beberapa ciri lain:

1. Gaya bersarang
2. & operator

Gaya bersarang

kurang menyokong gaya bersarang. Contohnya:

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

ini bersamaan dengan:

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

& operator Pengendali

& mengendali pemilih induk.

Nama pembolehubah biru

Tetapkan semua nama berubah menjadi biru gelap dan tambahkan garis bawah ketika melayang:

Atom secara automatik menambah

kelas ke semua pembolehubah dalam editor kod. Oleh itu, kita perlu mengubah suai gaya kelas .variable: .variable

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

Nombor baris semasa

Tetapkan nombor baris semasa ke biru:

Tambah

dalam colors.less. Gunakan warna ini dalam @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>

Ringkasan

Dengan contoh mudah dan asas CSS, kami telah mencipta tema sintaks Atom baru. Anda boleh terus memperbaiki tema anda dan berkongsi dengan dunia melalui Pengurus Pakej Atom (APM).

Sumber

1. fungsi operasi warna kurang
2. Menerbitkan tema atom
3. Manual Pengguna Atom

FAQ

(bahagian FAQ dalam teks asal ditinggalkan di sini kerana soalan-soalan ini tidak sepadan dengan matlamat asal pseudo topik dan lebih lama.)

Atas ialah kandungan terperinci Bina tema atom anda sendiri dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!