要查找要样式的任何元素的CSS类,请在编辑器中执行以下步骤:
>使用光标来突出显示要检查的元素.我在这里跟着你的双斜杠(即一个评论)的例子.
>按Ctrl Alt Shift P(或OS X上的Cmd Alt P).一个弹出窗口会告诉你该元素的所有类.通常,这是我们感兴趣的通知的最后一行.对于//,它是comment.line.double-slash.js.
>忽略最后一个点和其后的所有内容,因为保留它将仅将更改应用于特定文件类型(在这种情况下为js).现在加一个点.剩下的字符串是我们要样式的元素:.comment.line.double-slash.
通过打开命令面板打开.atom / styles.less(在Windows / Linux上的Ctrl Shift P或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;
}
在这里使用长类名称,我更喜欢第一个可读性选项.但这取决于你的选择.