在 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+Alt+P 在 OS X 上).弹出窗口将告诉您该元素的所有类.通常，我们感兴趣的是该通知的最后一行.对于//，就是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.

通过打开命令面板 (Ctrl+Shift+P 打开 .atom/styles.less在 Windows/Linux 上或 Cmd+Shift+P 在 OSX 上)并搜索应用程序:打开您的样式表".

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屋！