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

Question

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

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

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

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

我的问题是（1）如何更改这些项目的颜色，更重要的是（2）我在哪里可以查找如何更改这些项目的颜色？

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

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

Answer 2

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

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

通过打开命令调色板打开.atom/styles.less（Windows/Linux 上为 Ctrl+Shift+P 或 Cmd+Shift+P 在 OSX 上）并搜索“应用程序：打开您的样式表”。

将这些行附加到.atom/styles.less（如果尚未存在）：

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

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

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

---

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

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

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

Answer 3

语法在 1.14 中有所改变。 现在，您需要使用它来更改评论颜色

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