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

Question

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

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

这很好 - 现在我有明亮的黄色评论要求被注意而不是淡入背景.麻烦的是它现在看起来像下面

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

我的问题是(1)如何更改这些项目的颜色,更重要的是(2)我在哪里可以查看如何更改这些项目的颜色？

请注意,我不是网络程序员,对CSS或任何相关技术一无所知.因此,我正在寻找一个相当逐步的解决方案,与所发现的解决方案形成鲜明对比,例如,在这个问题的答案中,它假设了这个问题的内部运作的大量背景.

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(或OS X上的Cmd+ Alt+ P).弹出窗口将告诉您该元素的所有类.通常,这是我们感兴趣的通知的最后一行.因为//,它是comment.line.double-slash.js.
3. 忽略最后一个点及其后面的所有内容,因为保留它只会将更改应用于特定文件类型(js在本例中).现在添加一个点.剩下的字符串是我们想要样式化的元素:.comment.line.double-slash.

打开.atom/styles.less通过打开命令调色板(Ctrl+ Shift+ P在Windows/Linux或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;
    }
}

其他建议:如果相同的更改应适用于它们,则可以将元素标识符枚举为以逗号和空格分隔的列表.因此,如果您想使链接与注释具有相同的颜色,则有两种可能性:

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