在Atom编辑器中更改评论颜色 [英] Changing comment colour in Atom editor

问题描述

我想在Atom编辑器中更改评论的颜色.经过一番谷歌搜索，我发现可以将以下内容放在我的.atom/styles.less文件中:

I would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:

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

那太好了-现在我有鲜黄色的注释，需要引起注意，而不是淡入背景.问题在于它现在看起来像下面的

That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below

如您所见，注释的文本颜色已更改，但是注释定界符和注释中的链接仍保留为默认的几乎不可见的灰色，看起来有点傻.

As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.

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

My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?

请注意，我不是网络程序员，也不了解CSS或任何相关技术.因此，与例如在

Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.

推荐答案

要找出要设置样式的任何元素的CSS类，请在编辑器中遵循以下步骤:

To find out the CSS classes of any element you want to style, follow these steps in the editor:

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

1. Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
2. Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
3. Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.

通过在Windows/Linux上打开命令Palette( Ctrl + Shift + P 或 Cmd + Shift + P )，然后搜索应用程序:打开样式表".

Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".

将这些行添加到.atom/styles.less(如果尚不存在):

Append these lines to .atom/styles.less, if not already present:

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

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

Inside the brackets you can place CSS/LESS code for any element you want to customize.

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

---

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

---

Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:

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

在这里使用长类名时，我更倾向于使用第一个选项以提高可读性.但这取决于您的选择.

With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.

这篇关于在Atom编辑器中更改评论颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！