ace-editor 代码高亮对象表示法

Question

使用 Ace Editor 预打包版本并尝试向 Ace JavaScript 编辑器添加一些基本的代码突出显示（自定义关键字）。

请不要过多阅读示例，这纯粹是一个示例，以避免发布敏感数据。

关键字示例：添加到keywordMapper：

"options": "settings|options|global|user";

并在使用它的页面中添加了一些 css：

.ace-eclipse .ace_options {\
  color: rgb(255,20,147);\
}\

我认为它只会突出显示关键字，所以我可以得到这个（不突出显示点）：

但我尝试过的都没有。我只能得到第一个（前点：'.'）匹配的单词。 ".settings" 不匹配（你会认为它会匹配）。

这个想法是我将根据之前的令牌实现自动完成，例如输入“设置”。要获取包含“选项”（和其他内容）的列表，请单击选项并输入“。”获取一个包含“global|user”的列表，另一个“.”显示每个对象中的所有设置。

我已经使用规则进行了一些实验，但这已经足够令人困惑了，我能得到的最接近的是它在突出显示点的情况下工作。

感谢任何帮助。

附：尝试了 ace 主站点上的 <![CDATA[ 示例，甚至无法让他们发布的代码正常工作。

它太混乱了，几乎没有任何文档！我不禁认为这不会那么难，因为他们的网站上有大量的“现实世界用户”。

谢谢。

Answer 1

keywordMapper 仅用于关键字和顶级标识符。点后的所有属性都在https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/mode/javascript_highlight_rules.js#L210 中处理。 所以你应该在它之前添加另一个规则：

        {
            token : "options",
            regex : "settings|options|global|user"
        }, 

您可以使用https://ace.c9.io/tool/mode_creator.html 来试验荧光笔

但对于自动补全，您实际上并不需要突出显示标记，您可以只使用它们的值，而不是类型。