语法高亮指南Atom

时间:2014-05-30 21:36:02

标签: editor customization syntax-highlighting atom-editor

我对Github的新编辑感到非常满意。不幸的是,定制它并不容易。我想创建自己的语法突出显示主题,因为我对可下载的主题感到不满意(至少他们似乎没有使用Java)

现在样式的文件(syntax-variables,color.less等)似乎在:

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

问题在于我不知道哪个(CSS)类样式的语法元素。有没有我可以查找如何更改变量类型声明的颜色的地方?

3 个答案:

答案 0 :(得分:26)

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

此外,对于语法元素,您可以:

  1. 将文字光标放在要设置样式的项目上
  2. 在OS X上按 Cmd + Alt + P ,在其他平台上按,或在命令中找到“编辑器:日志光标范围”调色板以显示语法元素的范围
  3. 语法元素的范围直接转换为CSS类。

答案 1 :(得分:6)

您可以通过按Ctrl+Shift+I(在linux中测试)并突出显示任何元素来使用chrome web-console。然后按Edit->Open Your Stylesheet打开样式表,并使用LESS语法为元素添加样式。

例如:

您希望大胆突出显示类和函数名称。如果选择带有chrome-console的类,则可以看到它具有类.name

你应该添加样式表文件:

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

你可以创建自己的主题。在Atom,它并不困难 - 按Ctrl+Shift+P并输入"Generate Syntax Theme"。在新主题中,您可以复制其他主题的一些代码。如果你不了解CSS / LESS - 不用担心!您的新主题在名为style的{​​{1}}文件夹中包含文件。您可以在base.less文件中更改它或编写新的颜色规则。

Atom有很棒的文档,你可以在这个页面https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

中阅读有关创建主题的内容

答案 2 :(得分:1)

对于其他因为文件类型的突出显示不能被您的语言识别而来到这里的人

  • 打开~/.atom/config.cson文件(通过CTRL + SHIFT + p:键入``open config'')
  • customFileTypes下添加/编辑core部分,例如:

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

(您在语言包设置see here中找到了语言范围名称(“ source.lua”,“ text.html.php” ...))