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

前端之家收集整理的这篇文章主要介绍了css – 在Atom编辑器中更改注释颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在Atom编辑器中更改注释的颜色.从一些谷歌搜索,我发现我可以把以下的我的.atom / styles.less文件
atom-text-editor::shadow .comment {
    color: #ffffaa;
}

这很棒 – 现在我有明亮的黄色评论,要求被注意,而不是褪色到背景中.麻烦的是,它现在看起来像下面

您可以看到,注释的文本颜色已更改,但注释中的注释分隔符和链接保留为默认的几乎不可见的灰色,这看起来有点愚蠢.

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

请注意,我不是网络程序员,不了解任何CSS或任何相关技术.因此,我正在寻找一个相当逐步的解决方案,而不是解决方案,例如,在@L_404_1@的答案中,该答案假设在这些内容的内部工作中有相当大的背景.

解决方法

要查找要样式的任何元素的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;
}

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

猜你在找的CSS相关文章