Atom 语法高亮指南答案

【问题标题】：Syntax Highlighting Guide for AtomAtom 语法高亮指南
【发布时间】：2014-07-20 18:04:06
【问题描述】：

我对 Github 的新编辑器非常满意。不幸的是，定制它并不容易。我想创建自己的语法突出显示主题，因为我对那些可供下载的主题不满意（至少它们似乎不适用于 Java）

现在要设置样式的文件（语法变量、color.less 等）似乎位于：

~/.atom/ .../packages (if you want to change existing themes)

问题在于我不知道哪些 (CSS) 类对语法的哪些元素进行样式设置。有没有一个地方可以让我查看如何更改例如变量类型声明的颜色？

【问题讨论】：

标签： editor customization syntax-highlighting atom-editor

【解决方案1】：

是的，您可以使用命令atom --dev 或使用菜单View > Developer > Open in Dev Mode ... 在开发人员模式下启动Atom。执行此操作时，您可以右键单击 UI 中的任何元素并从上下文菜单中选择 Inspect Element，就像在 Web 浏览器中一样。

此外，对于语法元素，您可以：

将文本光标放在要设置样式的项目上
在 OS X 上按 Cmd+Alt+P，在其他平台上按 Ctrl+Alt+Shift+P，或在命令中找到“Editor: Log Cursor Scope”用于显示语法元素范围的调色板

语法元素的范围直接转换为 CSS 类。

【讨论】：

这个解决方案最终对 Markdown 文件非常有帮助，这些文件似乎缺乏像样的语法突出显示。我只是把类直接放到.editor {}类下的styles.less中。
Cmd+Alt+P 是特定于 Mac 的快捷方式...我在 Windows 上尝试了 Ctrl+Alt+P，但没有成功...而且我在命令面板中找不到您的字符串，在 1.3.1 中。
"Editor: Log Cursor Scope" 仅当您将光标置于活动编辑器中时才会显示在命令面板中。如果您先执行第 1 步，它将显示出来。
请注意，您可能需要为按下 Cmd+Opt+P 时弹出的每种样式添加一个部分。如果您只使用其中一种样式，那么其他样式可能会覆盖您正在尝试执行的操作，例如改变颜色

【解决方案2】：

您可以通过按Ctrl+Shift+I（在 linux 中测试）并突出显示任何元素来使用 chromium 网络控制台。然后按Edit->Open Your Stylesheet 打开您的样式表并使用LESS 语法为元素添加样式。

例如：

您想要粗体突出显示类和函数名称。如果您选择带有 chromium-console 的类，您可以看到它有类 .name

您应该在样式表文件中添加如下内容：

atom-text-editor::shadow .name{
    font-weight: bold
}

您可以创建自己的主题。在 Atom 中，这并不困难 - 按 Ctrl+Shift+P 并输入 "Generate Syntax Theme"。在新主题中，您可以从其他主题复制一些代码。如果你不知道 CSS/LESS - 别担心！您的新主题在名为 colors.less 的 style 文件夹中有文件。您可以更改它或在 base.less 文件上编写新的颜色规则。

Atom 有很棒的文档，您可以在此页面中阅读有关创建主题的信息https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

【讨论】：

谢谢，我终于可以更改评论颜色了。您表明必须指定“atom-text-editor::shadow”的部分很重要，由于某种原因，我没有看到其他任何地方对此进行解释或演示。
是的，“atom-text-editor::shadow”很重要，而且您可能需要为按下 Cmd+Opt+P 时弹出的每种样式添加一个部分。如果你只做其中一种风格，那么另一种风格可能会覆盖你正在尝试做的事情，例如改变颜色
::shadow 已折旧。新语法：stackoverflow.com/a/43373452/1486850
谢谢你的这一点。我在 2 年前发布了这个，老实说非常惊讶它的工作时间）

【解决方案3】：

对于因您的语言无法识别文件类型的突出显示而来到这里的其他人：

打开~/.atom/config.cson文件（按CTRL+SHIFT+p：输入``open config''）

在core 下添加/编辑customFileTypes 部分，例如：

core:
  customFileTypes:
    "source.lua": [
      "conf"
    ]
    "text.html.php": [
      "thtml"
    ]

（您可以在语言包设置see here 中找到语言范围名称（“source.lua”、“text.html.php”...）

【讨论】：