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

Question

我想更改 Atom 编辑器中注释的颜色。通过一些谷歌搜索，我发现我可以将以下内容放入我的 .atom/styles.less 文件中：

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

太好了 - 现在我有亮黄色的评论，需要引起注意而不是淡出背景。问题是现在看起来像下面

如您所见，评论的文字颜色发生了变化，但评论中的评论分隔符和链接仍保持默认的几乎不可见的灰色，看起来有点傻。

我的问题是 (1) 我怎样才能改变这些项目的颜色，更重要的是 (2) 我在哪里可以找到如何改变这些项目的颜色？

请注意，我不是网络程序员，对 CSS 或任何相关技术一无所知。因此，我正在寻找一个相当循序渐进的解决方案，与找到的解决方案形成对比，例如，在 this question 的答案中，这些解决方案假设这些东西的内部工作有大量背景知识。

Answer 1

要找出您想要设置样式的任何元素的 CSS classes，请在编辑器中执行以下步骤：

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

通过打开命令面板打开.atom/styles.less (Ctrl+Shift+P 在 Windows/Linux 或 Cmd+Shift+P 在 OSX) 并搜索 "Application: Open Your Stylesheet"。

将这些行附加到 .atom/styles.less，如果还没有：

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

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

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

其他建议： 如果相同的更改适用于它们，您可以将元素标识符枚举为逗号和 space 分隔的列表。所以如果你想让链接和评论颜色一样，有两种可能：

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

此处使用的 class 名称很长，为了便于阅读，我更喜欢第一个选项。但这取决于您的选择。

Answer 2

语法在 1.14 中发生了变化。现在，您需要使用它来更改评论颜色

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

Answer 3

使用 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;
}

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

Changing comment colour in Atom editor

css

atom-editor