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!

• 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).

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.

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

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

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.

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

blue-everywhere-syntax

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

.
• 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

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.

@import "syntax-variables";

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

@import "colors";

// ...

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

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

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

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

.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;
    }
  }
}

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