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

Question

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

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

那太好了 - 现在我有一些明亮的黄色评论要求被注意而不是消失在背景中。麻烦的是它现在看起来像下面的

正如您所看到的，注释的文本颜色已更改，但注释中的注释分隔符和链接仍保留在默认的几乎不可见的灰色中，这看起来有点傻。

我的问题是（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 + OS X上的 Alt + P 。弹出窗口将告诉您该元素的所有类。通常，这是我们感兴趣的通知的最后一行。对于//，它是comment.line.double-slash.js。
3. 忽略最后一个点及其后面的所有内容，因为保留它只会将更改应用于特定文件类型（在这种情况下为js）。现在添加一个点。剩下的字符串是我们要设置样式的元素：.comment.line.double-slash。

在Windows / Linux或上打开命令pallette（ Ctrl + Shift + P ）打开.atom/styles.less在OSX上使用Cmd + Shift + P 并搜索“应用程序：打开样式表”。

将这些行附加到.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;
}

在这里使用长类名，我更喜欢第一个可读性选项。但这取决于你的选择。

Answer 3

语法在1.14中更改。 现在，您需要使用它来更改注释颜色

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