用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中文网其他相关文章！