用CSS構建自己的原子主題

Atom，這款21世紀的“可定製文本編輯器”，已成為全球數千開發者的首選。其易於擴展和定制的特點，使其備受青睞。開發者通過發布擴展包和主題，與Atom社區分享新功能。閱讀本文後，您將能夠發布您自己的Atom語法主題——開啟Atom定制之旅的絕佳第一步！

要點速覽

• Atom是一款可定制的文本編輯器，允許開發者使用CSS創建和分享自己的語法主題。
• 創建語法主題，首先需要下載Atom文本編輯器，然後使用自動生成功能創建語法主題包。
• Atom使用Less（CSS的超集）進行樣式設置，包括變量、嵌套樣式和&運算符等功能。更改主題後，重新加載Atom窗口即可查看效果。
• 主題創建和完善後，可通過Atom包管理器(APM)與Atom社區共享。

什麼是語法主題？

語法主題用於設置編輯器中文本/代碼區域的樣式。而界面主題則用於設置Atom文本編輯器的其他方面（如側邊欄、狀態欄、選項卡等）。本文僅關注語法主題的創建，只需具備CSS基礎知識即可。

入門指南

只需下載Atom文本編輯器即可開始！ Atom使用Less，它是CSS的超集，具有變量等便捷功能。

生成Atom語法主題包

創建語法主題曾經是一項繁瑣的工作，但如今Atom內置了強大的自動生成功能：

1. 打開Atom，按下Cmd Shift P（Windows系統使用Ctrl Shift P）。
2. 輸入generate。
3. 選擇“Package Generator: Generate syntax theme”選項。

Atom會提示您選擇保存包的位置，您可以隨意選擇。

命名您的包

Atom會打開生成的包作為項目，您可以開始編輯。 Atom建議包名以“-syntax”結尾，並使用小寫字母和連字符分隔的命名方式。例如，我將我的包命名為blue-everywhere-syntax，並將其設置為藍色主題。

包結構

自動生成的包結構清晰易懂：

• 主要樣式表位於index.less。
• 基礎樣式位於styles/base.less，顏色定義位於styles/colors.less。
• package.json文件用於定義包的名稱、描述和其他元數據。
• README.md文件使用Markdown格式描述您的主題，如果發布主題，此README將顯示在下載頁面上。

代碼示例

Atom的渲染引擎基於Chromium（了解Electron可深入了解其工作原理），因此可以使用CSS進行樣式設置。 Atom使用Less，它具有變量和嵌套導入等便捷功能。

要查看更改效果，只需重新加載Atom即可（使用Cmd Alt Ctrl L或“視圖”>“開發者”>“重新加載”）。在Atom設置（Cmd ,）>“主題”中，將編輯器的語法主題設置為新創建的主題。

將主題設置為藍色

打開colors.less文件（styles > colors.less）。您可以看到一個名為@very-dark-gray的變量，其值為#1d1f21。將其更改為深藍色#1d1f33。重新加載Atom（Cmd Alt Ctrl L或“視圖”>“開發者”>“重新加載”）。文本區域的背景顏色應該已更改。

代碼詳解

index.less導入base.less。 base.less與CSS類似，使用了Less變量（以@符號開頭）。

編輯器背景顏色由以下代碼定義：

<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中定義。

高級樣式

除了變量和導入，Less還有一些其他功能：

1. 嵌套樣式
2. &運算符

嵌套樣式

Less支持嵌套樣式。例如：

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

這等同於：

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

當前行號

將當前行號設置為藍色：

在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語法主題。您可以不斷改進您的主題，並通過Atom包管理器(APM)與世界分享。

資源

1. Less中的顏色操作函數
2. 發布Atom主題
3. Atom使用手冊

常見問題

（此處省略了原文中的常見問題解答部分，因為這些問題解答與主題的偽原創目標不符，且篇幅較長。）

以上是用CSS構建自己的原子主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！