在Atom编辑器中更改注释颜色

Question

我希望能够更改Atom编辑器中评论的颜色。通过一些谷歌搜索，我发现我可以在我的.atom/styles.less文件中添加以下内容：

atom-text-editor::shadow .comment {
    color: #ffffaa;
}

这很棒 - 现在我的评论是醒目的明黄色，而不是淡化到背景中。问题是现在它看起来像下面这样。

正如您所看到的，评论的文本颜色已经改变了，但是评论分隔符和评论中的链接仍然保持默认的几乎不可见的灰色，看起来有点傻。我的问题是（1）我该如何更改这些项目的颜色，更重要的是（2）我在哪里可以查找如何更改这些项目的颜色？请注意，我不是网页程序员，对CSS或任何相关技术一无所知。因此，与this question的答案中假定对这些东西的内部工作有相当多的背景知识不同，我正在寻找一个相当逐步的解决方案。

- N. Virgo

---

可能是Atom语法高亮指南的重复。 - Hexaholic

虽然我认为这个问题是重复的，但这可能是你要找的代码。只需将其添加到你已经找到的文件中。 atom-text-editor::shadow { .punctuation.comment, .comment, .link.hyperlink { color: #ffffaa; } } - Hexaholic

@Hexaholic，链接的问题是我在最后一段中所说的内容的好例子。对于精通CSS的人来说，它可能是我的问题的答案，但对于我来说不是，因为我没有将cmd-alt-P给我的信息转换为应该输入的CSS代码的知识。您的第二个评论很有帮助，可以作为答案发布，但是我无法从第一个链接中推断出来。 - N. Virgo

我理解你的观点。虽然我仍然不确定这是否是重复的，但我很快会发布一个答案。 - Hexaholic

你在这个问题中使用的atom标签是与基于XML的联合格式有关的，由于这篇文章是关于GitHub的Atom编辑器，我已将标签更改为atom-editor。希望这可以帮助你的问题得到正确的解答，有关标签的进一步信息，请阅读什么是标签，我应该如何使用它们？。 - Richard Slater

Answer 1

使用1.14.4版本：

// This styles comment text
atom-text-editor .syntax--comment {
    color: #53FFA1;
}

// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
    color: #008C3F;
}

- basiphobe

---

那个薄荷绿色真是太酷了！ - MingMan

Answer 2

要找到想要样式化的任何元素的CSS类，请按照以下步骤在编辑器中进行：

1. 使用光标突出显示要检查的元素。这里我按照您的双斜杠（即注释）示例进行。
2. 按下 Ctrl+Alt+Shift+P（或在 OS X 上按下 Cmd+Alt+P）。弹出窗口将告诉您该元素的所有类。通常，我们感兴趣的是该通知的最后一行。对于 //，它是 comment.line.double-slash.js。
3. 不考虑最后一个点和后面的所有内容，因为保留它只会将更改应用于特定的文件类型（在本例中为 js）。现在前置一个点。剩余的字符串就是我们想要样式化的元素：.comment.line.double-slash。

通过打开命令面板（在 Windows/Linux 上按下 Ctrl+Shift+P，在 OSX 上按下 Cmd+Shift+P）并搜索 “Application: Open Your Stylesheet” 来打开 .atom/styles.less。

如果还没有，请将以下行附加到 .atom/styles.less 中：

atom-text-editor::shadow {
    // custom comment styling goes here
}

在括号内，您可以为任何要自定义的元素放置CSS / LESS代码。

atom-text-editor::shadow {
    .comment.line.double-slash {
        color: #ffffaa;
    }
}

---

额外建议：如果应该对相同的元素标识符进行相同更改，可以将它们列为逗号和空格分隔的列表。因此，如果您想使链接与注释具有相同的颜色，则有两种可能性：

.comment.line.double-slash {
    color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
    color: #ffffaa;
}

或者

.comment.line.double-slash, .markup.underline.link.hyperlink {
    color: #ffffaa;
}

使用这里的长类名，为了可读性起见，我更喜欢第一种选择。但这取决于你的选择。

- Hexaholic

---

在Ubuntu 18.04中，使用Ctrl+Alt+Shift+P进行第二步操作对我无效。 - SaTa

在Windows 10上，Ctrl+Alt+Shift+P对我也不起作用。 - jfriend00

由于 Ctrl+Alt+Shift+P 在我的电脑上也无法使用（Windows 11），请问展开函数的名称是什么（即通过 Ctrl+Shift+P 访问）？ - fearless_fool

Answer 3

1.14版本中更改了语法。 现在，您需要使用此代码来更改注释颜色

atom-text-editor .syntax--comment {
         color: #228B22;
}

- Mojtaba Komeili

---

如果我只想为特定的文件类型更改语法，该怎么做？ - SaTa

Answer 4

@Hexaholic的回答已经过时，以下是最新的更新:

查找想要样式化的元素的CSS类

1. 使用Ctrl+Shift+i(Windows命令：window:toggle-dev-tools)打开开发者工具窗口

2. 激活元素检查器（在开发者工具窗口内使用Ctrl+Shift+C或单击光标图标）

3. 将鼠标悬停在您希望样式化的元素上

4. 确定适当的样式名称：每个样式名称都以点号开头并继续到下一个点。此示例应用了样式.syntax--comment、.syntax--block和.syntax--bibtex。

应用自定义CSS

1. 打开自定义样式表.atom/styles.less（命令查找器中的“应用程序：打开您的样式表”(Windows/Linux为Ctrl+Shift+P或Cmd+Shift+P，OSX)

2. 输入适当的CSS。例如，要给所有注释上色:

atom-text-editor .syntax--comment {
  color: #ffffaa;
}

或者将所有标记为BibTeX的注释也着色：

atom-text-editor .syntax--comment.syntax--bibtex {
  color: #ffffaa;
}

通常情况下，与 CSS 相关的更明确的注释（如后者）会覆盖更一般的类（如前者）。

更多阅读

• Atom 的指南：进一步自定义

- Martin Smith