如何在Atom编辑器中更改TODO高亮显示

Question

我认为Atom编辑器中TODO的“标志”高亮过于弱化/不明显。

我该如何更改呢？但我不想在侧边栏中列出待办事项（https://atom.io/packages/todo-show）。

这里进行比较：

Vim编辑器中有非常强烈的高亮（期望效果）：

在Atom编辑器中：

主要问题是，Atom将许多其他代码单词用相同颜色进行了高亮...

- zypro

Answer 1

作为GitHub的Atom编辑器是基于HTML5和CSS3构建的，因此您可以非常轻松地更改样式表。我已经记录了如何进行此特定更改的一些内容，尽管您可以将相同的原则应用于编辑器中的任何样式元素。

步骤

首先，您需要找到要设置样式的元素实例。在这种情况下，我创建了一个新的、空的文件，并添加了文本//TODO: is too subtle。

1. 现在你需要找到与单词 TODO 相关的适当选择器，只需将光标放在 TODO 的字母之间，然后按下 CtrlAltShiftP 或从 命令面板 中选择 Editor: Log Cursor Scope。
2. 适用于该位置的选择器从最不具体的顶部列出到最具体的底部，在这种情况下，您需要底部的最具体选择器，请将其复制到剪贴板中。
3. 接下来，您需要打开个人样式表，可以通过选择“编辑”，然后选择“样式表...”来执行此操作，也可以从命令面板中选择 Application: Open Your Stylesheet。
4. 滚动到样式表的底部，并粘贴第2步中的选择器，您需要在开头添加一个句点（full-stop）以使其成为有效的选择器。
5. 继续添加您喜欢的样式，例如 VIM 样式偏好：

    atom-text-editor::shadow .type.class.todo {
      background-color: yellow;
      color: black;
      font-style: normal;
    }

6. 最后保存你的样式表并切换回测试文档以查看结果变化。

感谢zypro指出我的原始答案没有考虑到在Atom的最近版本中使用Shadow DOM。

更新：Atom在某个时刻取消了Shadow DOM。我正在使用版本1.34.0，它在上述样式表中采用以下条目：

atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
    background-color: yellow;
    color: black;
    font-style: normal;
}

此外，对于Python（以及其他一些语言），您需要在核心设置中取消选中“使用Tree Sitter解析器”选项。

- Richard Slater

---

谢谢你提供如此详细的答案。但是按照你的步骤操作后，没有任何变化。我的Atom编辑器只识别3个TODO选择器：http://i.imgur.com/DHorHsr.png 这是一个问题吗？ 其他更改都有效。 - zypro

好奇，我不确定为什么那对你不起作用。你可以尝试几件事情：

1. 使用 Ctrl-Alt-R 重新加载编辑器
2. 将类名从 .storage.type.class.todo 更改为 .todo，然后保存并重新加载
3. 在 yellow 和 ; 之间加入 !important，然后保存并重新加载

- Richard Slater

我找到问题了！我必须禁用“使用 Shadow DOM”核心设置！天啊。非常感谢 =) - zypro

做得好，发现得不错。我不确定禁用Shadow DOM是否是个好主意，因为这个选项将在Atom的未来版本中消失。我会仔细阅读关于shadow DOM的内容，并更新我的答案以提供更准确的版本。 - Richard Slater

所有的工作都已完成并测试通过，供参考我在 Atom 1.7.0-beta0 中进行了记录。感谢 @zypro 的帮助，没有你我无法解决这个问题。 - Richard Slater