Atom，這款21世紀(jì)的“可定製文本編輯器”，已成為全球數(shù)千開(kāi)發(fā)者的首選。其易於擴(kuò)展和定制的特點(diǎn)，使其備受青睞。開(kāi)發(fā)者通過(guò)發(fā)布擴(kuò)展包和主題，與Atom社區(qū)分享新功能。閱讀本文後，您將能夠發(fā)布您自己的Atom語(yǔ)法主題——開(kāi)啟Atom定制之旅的絕佳第一步！

要點(diǎn)速覽

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

什麼是語(yǔ)法主題？

語(yǔ)法主題用於設(shè)置編輯器中文本/代碼區(qū)域的樣式。而界面主題則用於設(shè)置Atom文本編輯器的其他方面（如側(cè)邊欄、狀態(tài)欄、選項(xiàng)卡等）。本文僅關(guān)注語(yǔ)法主題的創(chuàng)建，只需具備CSS基礎(chǔ)知識(shí)即可。

入門(mén)指南

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

生成Atom語(yǔ)法主題包

創(chuàng)建語(yǔ)法主題曾經(jīng)是一項(xiàng)繁瑣的工作，但如今Atom內(nèi)置了強(qiáng)大的自動(dòng)生成功能：

1. 打開(kāi)Atom，按下Cmd Shift P（Windows系統(tǒng)使用Ctrl Shift P）。
2. 輸入generate。
3. 選擇“Package Generator: Generate syntax theme”選項(xiàng)。

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

命名您的包

Atom會(huì)打開(kāi)生成的包作為項(xiàng)目，您可以開(kāi)始編輯。 Atom建議包名以“-syntax”結(jié)尾，並使用小寫(xiě)字母和連字符分隔的命名方式。例如，我將我的包命名為blue-everywhere-syntax，並將其設(shè)置為藍(lán)色主題。

包結(jié)構(gòu)

自動(dòng)生成的包結(jié)構(gòu)清晰易懂：

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

代碼示例

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

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

將主題設(shè)置為藍(lán)色

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

代碼詳解

index.less導(dǎo)入base.less。 base.less與CSS類(lèi)似，使用了Less變量（以@符號(hào)開(kāi)頭）。

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

@import "syntax-variables";

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

@syntax-background-color在syntax-variables.less中定義：

@import "colors";

// ...

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

@very-dark-gray在colors.less中定義，這就是我們修改colors.less中@very-dark-gray值來(lái)更改編輯器背景顏色的原因。

樣式表組織

樣式表變量的組織方式取決於個(gè)人喜好。 Atom的自動(dòng)生成的模板建議將顏色相同的項(xiàng)目分組，在base.less中使用語(yǔ)法變量，然後在syntax-variables.less中為每個(gè)變量賦值。但顏色也可以直接在base.less中定義。

高級(jí)樣式

除了變量和導(dǎo)入，Less還有一些其他功能：

1. 嵌套樣式
2. &運(yùn)算符

嵌套樣式

Less支持嵌套樣式。例如：

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

這等同於：

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

&運(yùn)算符

&運(yùn)算符簡(jiǎn)化了父選擇器。

藍(lán)色變量名

將所有變量名設(shè)置為深藍(lán)色，並在懸停時(shí)添加下劃線：

Atom自動(dòng)為代碼編輯器中的所有變量添加.variable類(lèi)。因此，我們需要修改.variable類(lèi)的樣式：

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

當(dāng)前行號(hào)

將當(dāng)前行號(hào)設(shè)置為藍(lán)色：

在colors.less中添加@deep-sky-blue: #009ACD;。在base.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;
    }
  }
}

總結(jié)

通過(guò)簡(jiǎn)單的示例和CSS基礎(chǔ)知識(shí)，我們創(chuàng)建了一個(gè)全新的Atom語(yǔ)法主題。您可以不斷改進(jìn)您的主題，並通過(guò)Atom包管理器(APM)與世界分享。

資源

1. Less中的顏色操作函數(shù)
2. 發(fā)布Atom主題
3. Atom使用手冊(cè)

常見(jiàn)問(wèn)題

（此處省略了原文中的常見(jiàn)問(wèn)題解答部分，因?yàn)檫@些問(wèn)題解答與主題的偽原創(chuàng)目標(biāo)不符，且篇幅較長(zhǎng)。）

以上是用CSS構(gòu)建自己的原子主題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！